1.0.1 • Published 2 years ago
react-group-chatup v1.0.1
React Group Chatup UI Component V 1.0.1
React UI component to allow public group chat ui on react projects & platforms where multiple users can participate in public group chat.
Demo
Features
- Customizable.
- Easy to use.
- Responsive.
- Cross platform
Requirements
- React version >= 16
- Node version >= 14
Installation
npm install react-group-chatupUsage/Examples
import React, {useState} from 'react
import Chatbox from 'react-group-chatup'
function App() {
const [messages, setMessages] = useState([])
const _onSendMessage = (data) => {
const messageObj = {
avatar: userIcon,
auther: 'me',
auther_name: 'Demo User',
data: data,
created_at: new Date().toDateString()
}
_updateMessageList(messageObj);
}
return <div>
<Chatbox
messages={messages}
_onSendMessage={_onSendMessage}
/>
</div>
}Note: All backend/Database related actions need to be handled in _onSendMessage event.
Props
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| brandName | String | No | Package Name | Allows to display your app name on component's header. |
| brandLogo | String | No | Package's Logo | Allows to use your own app's logo on the chat header. |
| brandLogoHeight | String | No | 30px | Allows to set the height of brand logo of your app. |
| brandLogoWidth | String | No | 30px | Allows to set the width of brand logo of your app. |
| theme | String | No | #0099cc | Allows to change the theme color of the component according to your app's theme. |
| themeTextColor | String | No | #ffffff | Allows to change the theme text color of the component. |
| avatar | Boolean | No | true | If disabled, user's avatars in messages will not be displayed. |
| emoji | Boolean | No | true | If disabled, emoji options will be hidden. |
| sound | Boolean | No | true | if disabled, message notification tune will be paused. |
| messages | Array | Yes | Empty Array | This prop contains list of all messages in an array with a specific object structure. |
| _onSendMessage | Function | Yes | This methods handles the event of pressing enter or send message button action. It allows you to handle backend/database related actions to update DB and message arrays. |
Message Object
{
avatar: user_avatar.png,
auther: 'me | other',
auther_name: 'Demo User',
data: 'Hello world...',
created_at: 'Aug 28, 2022'
}