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 secondary 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]