React Chat Components
React Chat Components is a library of reusable and customizable components for building chat applications in React. Use the default components and themes or modify as you like with your own styles.
Usage:
- You can start using our already built user interface right away by :
; const App = { return <ChatListProvider userData=yourUserData/> } ;
Note : The userData
prop is required for displaying the list. If the prop is not passed, only the header and the search bar are rendered.
- To use a custom styling, you can pass a
chatProviderClass
to theChatListProvider
component.
; const App = { return <ChatListProvider userData=yourUserData chatProviderClass="custom-chat-provider-class" /> } ;
Similarily, you can pass your own styles to other default components.
Example:
;; const App = { return <ChatListProvider userData = yourUserData chatProviderClass = "your-custom-chat-provider-class" > <ChatListHeader chatHeaderClass = "your-custom-chat-header-class" /> <ChatList chatListClass = "your-custom-chat-list-class" /> <ChatListSearch chatSearchClass = "your-custom-chat-search-class" /> </ChatListProvider> } ;
- To use your custom components for the child components, i.e.,
Chat List
,Chat Header
andChat Search
, you can pass your custom built components either as children or as props.
; const App = { return <ChatListProvider userData = yourUserData customHeader = //your custom Header} customList = //your custom List} customsearch = //your custom Seacrh bar} /> ) ;
Components
ChatListProvider
This is the main component and can be used as the only component to start up and use React Chat Component's default interface.
Props :
Prop name | Prop type | Description |
---|---|---|
userData | object (required) | This prop is used for passing user data for rendering the list of users. |
chatProviderClass | string (optional) | This prop can be used for passing custom style for the component. |
customHeader | react component (optional) | This prop can be used for passing custom header component. |
customList | react component (optional) | This prop can be used for passing custom list component. |
customSearch | react component (optional) | This prop can be used for passing custom search component. |
ChatList
This is the component containing the list of all users along with their names, avatars and other details.
Props :
Prop name | Prop type | Description |
---|---|---|
chatListClass | string (optional) | This prop can be used for passing custom style for the component. |
customChatListItem | react component (optional) | This prop can be used for passing custom chat list item component. |
ChatListHeader
This is the header component of the chat list box.
Props :
Prop name | Prop type | Description |
---|---|---|
chatHeaderClass | string (optional) | This prop can be used for passing custom style for the component. |
ChatListSearch
This is the search bar component of the chat list box.
Props :
Prop name | Prop type | Description |
---|---|---|
chatSearchClass | string (optional) | This prop can be used for passing custom style for the component. |
User data object :
id: 0 avatar: name: "Username" onlineStatus: "online" lastSeen: // last seen time as a Date() object , previewMessage: "Lorem ipsum dolor sit amet." messages: messageId: 1 text: 'message text' receivedFrom: {}