react-simple-chat
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

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.

Dependents (0)

Package Sidebar

Install

npm i react-simple-chat

Weekly Downloads

20

Version

1.1.4

License

MIT

Unpacked Size

181 kB

Total Files

44

Last publish

Collaborators

  • tomasz_niedzielski