Description
Plug and play Chat component for creating React Chat App.
In isolation, the component looks like this:
The idea is that you embed this component in your own container, for example a pop-up chat widget or beneath a heading:
Really, the aim is to make implementing a chat component as quick as possible. All you need to do is pass an array of messages (normally this.state.messages, unless you're using hooks):
React ChatBox Component alternatives and similar libraries
Based on the "UI Components" category.
Alternatively, view React ChatBox Component alternatives based on common mentions on social networks and blogs.
-
Swiper
Most modern mobile touch slider with hardware accelerated transitions -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. -
react-virtualized
React components for efficiently rendering large lists and tabular data -
react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React -
tiptap
The headless rich text editor framework for web artisans. -
draft-js
A React framework for building text editors. -
react-table
π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table -
recharts
Redefined chart library built with React and D3 -
sweetalert2
β¨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. πΊπ¦ -
react-window
React components for efficiently rendering large lists and tabular data -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
react-dates
An easily internationalizable, mobile-friendly datepicker library for the web -
react-map-gl
React friendly API wrapper around MapboxGL JS -
downshift π
π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. -
AG Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. -
react-content-loader
βͺ SVG-Powered component to easily create skeleton loadings. -
react-color
:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more -
react-datepicker
A simple and reusable datepicker component for React -
react-data-grid
Feature-rich and customizable data grid React component -
react-dropzone
Simple HTML5 drag-drop zone with React.js. -
react-toastify
React notification made easy π ! -
victory
A collection of composable React components for building interactive data visualizations -
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable listβοΈ -
react-big-calendar
gcal/outlook like calendar component -
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-hot-toast
Smoking Hot React Notifications π₯ -
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-text-mask
Input mask for React, Angular, Ember, Vue, & plain JavaScript -
lightGallery
A customizable, modular, responsive, lightbox gallery plugin. -
react-modal
Accessible modal dialog component for React -
react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg -
google-map-react
Google map library for react that allows rendering components as markers :tada: -
react-day-picker
DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications. -
react-lazyload
Lazy load your component, image or anything matters the performance. -
react-autosuggest
WAI-ARIA compliant React autosuggest component -
fixed-data-table
A React table component designed to allow presenting thousands of rows of data.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of React ChatBox Component or a related project?
README
React ChatBox Component
Plug and play Chat component for creating React Chat App.
In isolation, the component looks like this:
[ChatBox Component](screenshots/headless.png)
The idea is that you embed this component in your own container, for example a pop-up chat widget or beneath a heading:
[ChatBox plugged in](screenshots/embed.png)
Really, the aim is to make implementing a chat component as quick as possible. All you need to do is pass an array of message
s (normally this.state.messages
, unless you're using hooks):
import 'react-chatbox-component/dist/style.css';
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",
},
},
]
<ChatBox
messages={messages}
/>
To differentiate bubble color, you can use the pass a user
object with a uid
property. When sender uid
matched the user
uid
, it will render message from the right side.
const user = {
"uid" : "user1"
}
<ChatBox
messages={messages}
user={user}
/>
If you built your own chat server, you may need to map messages
and user
to match this data structure. If you're using CometChat, the structure is identical.
See an example here (no cussing, please).
Features
- [x] Responsive
- [x] Automatically scrolls to bottom
- [x] Really easy and quick to use
- [x] Customise the colours to match your app
- [x] Pass your own rendering functions to tweak things like the chat bubble or (optional) typing indicator
Installation
npm install react-chatbox-component
How to use
I wrote a tutorial on how to make the chat box work with message history, typing indicators, and more here. Find the example source code here too.
The ChatBox component has the following API:
messages
(array) - array of messages to render inside the chat interfaceonSubmit
(function) - function to execute when user submit a new message. Will log new message into the console if not usedisLoading
(boolean) - display a loading screen when the value istrue
user
(object) - the currently logged in user. Used to differentiate message bubble colorrenderMessage
(optional) (function) - optional function to render chat bubblestypingListener
(optional) (function) - optional function executed when user is typingtypingIndicator
(optional) (element) - JSX element to render at the bottom of chat interface. Used to show that a user is typing
Here is a typical implementation for this component. You need to import the style and the component:
import 'react-chatbox-component/dist/style.css';
import {ChatBox} from 'react-chatbox-component';
<div className='container'>
<div className='chat-header'>
<h5>React Chat Box Example</h5>
</div>
<ChatBox messages={this.state.messages} />
</div>
Ready Example
If you'd like to help in development or just curious with how things work, you can run a local copy of this repo by following these steps:
- Download or clone this repository
- In the
react-chatbox-component
directory, runnpm install
- run
npm start
The application entry point is located in src/test/App.js
while the library is in src/lib/
directory.
Any contribution, no matter how small, is greatly appreciated.
*Note that all licence references and agreements mentioned in the React ChatBox Component README section above
are relevant to that project's source code only.