Needlessly Postulating Minds

    react-custom-chat

    0.6.1 • Public • Published

    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

    Link to Repository

    Demo

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

    Install

    npm i react-custom-chat

    DownloadsWeekly Downloads

    56

    Version

    0.6.1

    License

    ISC

    Unpacked Size

    28 kB

    Total Files

    7

    Last publish

    Collaborators

    • ebenezerdon