react-chat-awesome v1.0.1

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:

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;
  }
}