react-simple-chat

Simple chat component for React.js

Install

npm i react-simple-chat

Imports

// Chat component
import Chat, { Message } from 'react-simple-chat';
// Chat styles
import 'react-simple-chat/src/components/index.css';

Example

const [messages, setMessages] = useState<Message[]>([
    {
        id: 1,
        text: 'Hello my friend!',
        createdAt: '2021-07-21 12:09:12', // optional
        user: {
            id: 2,
            avatar: 'https://link-to-avatar/avatar.jpg' // optional
        }
    }
]);

<Chat
    title="Jane Doe"
    user={{ id: 1 }}
    messages={messages}
    onSend={message => setMessages([...messages, message])}
/>

Chat props

| prop | default | type | description | | ---- | ---- | ---- | ---- | | headerAvatar | none | string | Chat avatar photo url. | | title | Chat Demo | string | Title of chat. | | minimized | false | boolean | Describes if chat is minimized or not. | | user | none | object | e.g. user: { id: 1 }, User object needs to have id property which defines who sent the message. | | onSend | none | function | Returns message object when click send button. | | messages | none | array | List of messages | | isTyping | false | boolean | Show typing indicator. | | onInputTextChanged | none | function | Returns value of message input when text changed. | | headerStyle | none | object | Object styles for header component. | | titleColor | none | string | Color of title in header. | | minimizeIcon | none | string | Path to custom minimize icon in header. | | leftBubbleStyle | none | object | Object styles for left bubbles. | | rightBubbleStyle | none | object | Object styles for right bubbles. | | backgroundColor | none | string | Background color of messages container. | | timestampStyle | none | object | Object styles for timestamps. | | inputToolbarStyle | none | object | Object styles for input toolbar. | | inputStyle | none | object | Object styles for input. | | sendIcon | none | string | Path to custom send icon. | | chatIcon | none | string | Path to custom chat widget. | | containerStyle | none | object | Object styles for the entire chat component. | | widgetStyle | none | object | Object styles for chat widget. |