React Group Chatup UI Component V 1.0.1

React UI component to allow public group chat ui on react projects & platforms where multiple users can participate in public group chat.

Demo

View Demo

Features

• Customizable.
• Easy to use.
• Responsive.
• Cross platform

Requirements

• React version >= 16
• Node version >= 14

Installation

  npm install react-group-chatup

Usage/Examples

import React, {useState} from 'react
import Chatbox from 'react-group-chatup'

function App() {
  const [messages, setMessages] = useState([])

  const _onSendMessage = (data) => {
    const messageObj = {
      avatar: userIcon,
      auther: 'me',
      auther_name: 'Demo User',
      data: data,
      created_at: new Date().toDateString()
    }
    _updateMessageList(messageObj);
  }

  return <div>
            <Chatbox 
              messages={messages}
              _onSendMessage={_onSendMessage} 
            />
        </div>
}

Note: All backend/Database related actions need to be handled in _onSendMessage event.

Props

|Name|Type|Required|Default Value|Description |:----|:----|:----|:----|:----| |brandName|String|No|Package Name|Allows to display your app name on component's header.| |brandLogo|String|No|Package's Logo|Allows to use your own app's logo on the chat header.| |brandLogoHeight|String|No|30px|Allows to set the height of brand logo of your app.| |brandLogoWidth|String|No|30px|Allows to set the width of brand logo of your app.| |theme|String|No|#0099cc|Allows to change the theme color of the component according to your app's theme.| |themeTextColor|String|No|#ffffff|Allows to change the theme text color of the component.| |avatar|Boolean|No|true|If disabled, user's avatars in messages will not be displayed.| |emoji|Boolean|No|true|If disabled, emoji options will be hidden.| |sound|Boolean|No|true|if disabled, message notification tune will be paused.| |messages|Array|Yes|Empty Array|This prop contains list of all messages in an array with a specific object structure.| |_onSendMessage|Function|Yes| |This methods handles the event of pressing enter or send message button action. It allows you to handle backend/database related actions to update DB and message arrays.|

Message Object

    {
        avatar: user_avatar.png,
        auther: 'me | other',
        auther_name: 'Demo User',
        data: 'Hello world...',
        created_at: 'Aug 28, 2022'
    }

Authors

• @ahmedmalik93

License

MIT