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 :
import React from 'react';
import { ChatListProvider } from './components/'
const App = () => {
return (
<ChatListProvider userData={yourUserData}/>
)
}
export default App; 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
chatProviderClassto theChatListProvidercomponent.
import React from 'react';
import { ChatListProvider } from './components/'
const App = () => {
return (
<ChatListProvider
userData={yourUserData}
chatProviderClass="custom-chat-provider-class"
/>
)
}
export default App;Similarily, you can pass your own styles to other default components.
Example:
import React from 'react';
import { ChatListProvider,
ChatList,
ChatListHeader,
ChatListSearch
} from './components';
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>
)
}
export default App; - To use your custom components for the child components, i.e.,
Chat List,Chat HeaderandChat Search, you can pass your custom built components either as children or as props.
import React from 'react';
import { ChatListProvider } from './components/'
const App = () => {
return (
<ChatListProvider
userData = {yourUserData}
customHeader = {//your custom Header}
customList = {//your custom List}
customsearch = {//your custom Seacrh bar}
/>
)
}
export default App; 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. |
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. |
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. |
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. |
{
id: 0,
avatar: require(urlToAvatarImage),
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: {},
},
]
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent