Skip to content

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

Notifications You must be signed in to change notification settings

ebenezerdon/react-custom-chat

Repository files navigation

react-custom-chat

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

Demo gif of react-custom-chat being used

Table of Contents

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]

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published