react-custom-chat

react-custom-chat is a free and fully customizable chat window that can be easily included in any project.

Link to Repository

Demo

Table of Contents

• Installation
• Example
• Components

Installation

$ npm install react-custom-chat

Example

import ChatBox from 'react-custom-chat'
import { useState } from 'react'

const App = () => {
  const [messageList, setMessageList] = useState([])

  const handleSendMessage = newMessage => {
    setMessageList([
      ...messageList,
      {text: newMessage, person: 'primary'}
    ])
  }

  return (
    <div>
      <ChatBox
        settings={{
          position: 'right',
          navColor: 'green',
          navText: 'Jane Doe',
        }}
        messageList={messageList}
        onSendMessage={handleSendMessage}
      />
    </div>
  )
}

Components

ChatBox

ChatBox props:

| prop | type | required | description | |------------------|--------|----------|-------------| | settings | object | no | You can use this prop to define custom settings for your chat window. | | messageList | array | yes | an array of objects for your messages. See message object here | | isOpen | boolean | yes | Forces the open/close state of the chat window. If this is not set, it will be closed by default, and open when the chat icon is clicked. | | onSendMessage | function | yes | The function's first parameter will be the message from the input field. see example for usage.

Settings properties:

| property | type | description | |------------------|--------|-------------| | position | string | This indicates the position of your chat window. Value can be left or right. Default is right. | | navColor | string | You can use this to customize your NavColor | | primaryColor | string | Use this to define the primary user color. You can choose from 'green', 'red', 'blue', etc... | | secondaryColor | string | Use this to define the primary user color. You can choose from 'green', 'red', 'blue', etc... | | navText | string | This is the text that shows up on the chat window header. The Default is 'Jane Doe'|

Message Object

Each message is styled differently depending on its type. Currently, only text is supported. Each message object has a person property which can have the value 'primary' or 'secondary', and a text property which contains the message text.

{
  text: 'hello world!',
  person: 'primary',
}

Using react-custom-chat? Let's talk

If you're using react-custom-chat, I'd love to see what you're building! Send me a mail [email protected]