Building a React chat component (plus, how I uploaded my first npm module)

Posted on October 31, 2019


Hi everyone! I’m a React developer and I have been building chat apps using CometChat and React for some tutorials. Along the way, I noticed that I have similar interface component that I used again and again in these tutorials. A chat window hardly change in my projects, so I began to think how great it would be to have an NPM module that I can just install and use, instead of copy pasting JSX and CSS code repeatedly.

That’s why I decided to write a reusable chat interface component to use with CometChat that works out of the box. Please welcome, React Chatbox Component library 👋

s 776EDF5EA507EEE69B47D4C89D7671CE4D4FFCB4A428C5E174BD3E105BBA661F 1572274712699 headless

If you’re interested in jumping to the code, here is the repo.

But if somehow you’re interested in my thought process and experience in publishing this library to NPM, then feel free to read on.

The thinking process behind the chatbox component

Following this tutorial by Rao, I used Create React App to structure the project files so I can build the library and test it at the same time. The library is a React UI component, so I write all the code inside lib directory and create a named export for the component. This way, adding a new UI component into the library would be easy in the future.

Inside the test directory, I created a very basic React component which renders the library, and I called it from the src/index.js file. Since the entire library project can be run locally, developers can simply clone the repo, install the NPM modules and do npm start without creating another React project.

Finally, there is the npm run build command, which I simply copied from Rao’s tutorial. It will use Babel to transpile all the code inside lib directory while ignoring testing files. As of now this library doesn’t have any test files, but I think it will be useful in the future.

Now that you learned about the project structure, let’s talk about the library itself

The purpose of this library is to create a React component module that can be used to create a Chat component without having to write your own interface and styling code. I created a small, embed-able chat window with a single text input element that processes several props to create a working chat window.

In the chat component, there is a messages prop, an array of objects that contain the message and the sender. In order to differentiate the chat bubbles between the user and their contacts, the component will compare the uid of the user and the sender object. The currently logged in user’s message will be rendered with a blue chat bubble and aligned to the right, while the contacts will be rendered in a white chat bubble and aligned to the left, similar to other popular chat apps that you might have used before.

import {ChatBox} from 'react-chatbox-component';

const messages = [
  {
    "text": "Hello there",
    "id": "1",
    "sender": {
      "name": "Ironman",
      "uid": "user1",
      "avatar": "https://data.cometchat.com/assets/images/avatars/ironman.png",
    },
  },
]

const user = {
  "uid" : "user1"
}

render() {
  return (
    <div className='container' style={{maxWidth: '800px', paddingTop: '100px'}}>
      <div className='chat-header'>
        <h5>React Chat Box Example</h5>
      </div>
      <ChatBox 
        messages={messages} 
        user={user} />
    </div>
  )
}

Just add a container and a header, and you’re ready to go!

Publishing my first NPM package

Once the library is done, I need to find out how I can publish it to NPM. I googled how to publish NPM package, and after

It turns out you just need to register an account with npmjs.com and log in from your console.

npm login

Also, don’t forget to update your package.json with more details because npmjs.com did use them for showing information to visitors:

repository": {
    "type": "git",
    "url": "git+https://github.com/nsebhastian/react-chatbox-component.git"
},
"keywords": [
  "chat component",
  "react component",
  "chat box"
],
"author": "Nathan Sebhastian",
"license": "MIT",
"bugs": {
  "url": "https://github.com/nsebhastian/react-chatbox-component/issues"
},
"homepage": "https://github.com/nsebhastian/react-chatbox-component#readme",

Oh and for a bonus, you might also want to include badges in your repo, I’ve included license, npm current version and pull requests into the repo by looking at the README markdown of React Helmet. Turns out you just needed to select the badge category you want to add and fill in the blank from shields.io.

Pro tip: instead of updating version manually from package.json after updating README with badges, you can use the npm version command to increment the version number of your package:

npm version patch
npm publish

The patch command will update the last number in your semantic version. You can update the second number with minor and the first number with major respectively.

Thank you for reading. I hope you learned a thing or two from this post 🙏

React Distilled 2.0 is released

If you'd like to learn more about React and how you can use it to build a complete web application from scratch, I'm offering a 28% off my book React Distilled to celebrate its release (from $49 to $34). 

It includes new chapters on React Context API and React Hooks, and it shows how you can create React app using nothing but React and Firestore.

Share this:
LinkedIn
Reddit
WhatsApp

Get Free Guides