react-chat-awesome

Fully configurable and customizable chat component for your React applications.

Advantages

• 100% Customizable
• Props for styles customization
• Lightweight (only react and prop-types as deps)
• Message validation included
• Backend agnostic
• In active development

Comming in new versions:

• emoji picker
• sending files and images

[Demo] Coming soon...

Table of Contents

• Installation
• Example
• API

Installation

The package can be installed via NPM:

npm install react-chat-awesome --save

Or YARN:

yarn add react-chat-awesome --save

Example

import React, { Component } from 'react'
import { ChatAwesome } from 'react-chat-awesome'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      history: []
    }

    this.sender = { id: 1 };
    this.receiver = { id: 2, imageUrl: 'path/to/source' };

    this.onSendMessageClick = this.onSendMessageClick.bind(this);
  }

  onSendMessageClick(msgText) {
    this.setState({ history: [...this.state.history, {
      id: +new Date(),
      msg: {
        type: 'text',
        text: msgText
      },
      userID: this.sender.id
    }]})
  }

  render() {
    return (
      <div>
        <ChatAwesome
          history={ this.state.history }
          sender={ this.sender }
          receiver={ this.receiver }
          onSendMessageClick={ this.onSendMessageClick }
        />
      </div>
    );
  }
}

API

ChatAwesome is the only component you need to import. * - required prop

ChatAwesome props:

prop	type	description
*sender	object	person who interacts with the UI and types the message.
*receiver	object	person who receives the messages and send responses to sender
history	message[]	array of messages
onSendMessageClick	function	callback function, executes when user send the message
onMessageChange	function	callback function, executes when user type something
onChatClose	function	callback on close button click
onChatOpen	function	callback on open button click
isOpen	boolean	programatically close/open chat (default false)
showReceiverImageOnMessage	boolean	set if image should be displayed near each receiver message
sendMessageIcon	string	url for alternative icon
wrapperStyles	object
headerStyles	object	styles for chat header
sendButtonStyles	object	styles for send button(not icon)
bodyStyles	object	styles for messages wrapper
footerStyles	object	styles for wrapper of the input field and chat button
inputStyles	object	styles for input field
closedChatStyles	object	styles for closed chat button
headerNameStyles	object	styles for receiver name at the header

Interfaces

Sender

{
  id: number | string; // required
}

Receiver

{
  id: number | string; // required 
  imageUrl: string;
}

Message

{
  id: number | string;
  userID: number | string;
  msg: {
    type: string;
    text: string;
  }
}