1.0.1 • Published 1 year ago
react-chat-comp v1.0.1
@React-chat-comp
react-chat-admin, easy integration and beatiful custom component
- Enter the required props
- You can custom the message box
- You can see which users seen for each message
- ✨Magic ✨
Installion
npm i react-chat-comp or yarn i react-chat-comp
Css Initial
import 'react-chat-comp/chat.css'
Required Props
| Name | Type | Description | Example |
|---|---|---|---|
| ownerId | String | The owner alwasy right on conversation | "634eb74f9141ae" |
| conversationList | Array | Conversation List, you can pick conversation from list | Please look at the down for a details |
| conversationContents | Array | In the conversation messages | Please look at the down for a details |
| totalContents | String | Total comments count | "50" |
| totalConversationList | String | Total conversation list count | "50" |
| handleGetUserConversation | Function | when you click user from converastionList you need to get request for conversationContents | (id) => getConversationContents(id) |
Optional Props
| Name | Type | Description | Example |
|---|---|---|---|
| wallpaper | String | In the chat conversation background image , you can use local file or link | "test.jpg" |
| height | String | Set your chat height the default was 400px | "200px" |
| disableContextMenu | Boolean | Right-clicking on the message shows users who saw the message | false or true |
| disableProfileDetailButton | Boolean | You can see the users's information | false or true |
| disableProfileHeader | Boolean | You can see the users's information on chat header | false or true |
| conversationHeaderStyle | Object | You can customize header with Inline Styling | {background: "red",borderRadius: "20px"} |
| icons | Object | You can customize icons Note: You can use local images or link | {profileIcon: "test.jpg",seenIcon: "", informationIcon: InfoIcon} |
| rightBoxColors | Object | You can customize right box colors | {boxColor:"#09C4FF",stickColor: "white",textColor: "white",captionColor: "grey",} |
| leftBoxColors | Object | You can customize right box colors | {boxColor:"#09C4FF",stickColor: "white",textColor: "white",captionColor: "grey",} |
conversationList - Example
_id: "6335aefed6fecd3d0b398285",
users: [
{
_id: "6375f174918fc73f14844eb9",
username: "Jonathan",
status: "online",
profileImage: "https://test.jpg",
},
{
_id: "631af63eb6ddad746391ba26",
username: "Sam",
status: "offline",
profileImage: "https://test.jpg",
oldMember: false,
},
],
type: "SINGLE",
lastMessage: {
_id: "633aeaf7b15f97144ae7ddab",
conversation: "6335aefed6fecd3d0b398285",
type: "TEXT", // Other types "IMAGE", "VIDEO", "AUDIO"
content: "On the conversation list shown last message",
caption: "",
createdAt: "2022-10-03T14:00:23.827Z",
isDeleted: [],
seen: false,
sender: "631af63eb6ddad746391ba26",
info: null,
},
lastMessageCreatedAt: "2022-10-03T14:00:23Z",
unSeenCount: 0,conversationContents - Example
Note: users information coming from conversationList
_id: "634eb74f96d47e3632940a7e",
conversation: "633d84fdd6fecd3d0b39843d",
sender: "633bf525da193fe0f16db864",
content: "Test Message",
type: "TEXT",
caption: "",
createdAt: "2022-10-18T14:25:19.967744681Z",
isDeleted: false,
isSeen: [],
reply: {
_id: "6343baf44129f4aa2386a857",
content:"https://test.jpg",
caption: "Test Caption message",
type: "IMAGE",
sender: "632b5ddf8720eddc024edd49",
},License
MIT