react-custom-chat v0.6.1

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:

Settings properties:

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 ebenezerdon.official@gmail.com