This tutorial is outdated. We're currently working on an updated version. In the meantime, for instructions on building a chat app using CometChat, please visit our documentation.
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 👋
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.
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.
Also, don’t forget to update your package.json with more details because npmjs.com did use them for showing information to visitors:
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:
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 🙏
Nathan Sebhastian
CometChat
