THIS PACKAGE IS IN EARLY DEVELOPMENT!

react-messaging

The perfect React chat component.

Installation

npm i react-messaging

Example

import React, { useState, useEffect } from 'react';
import { v4 } from 'uuid';
import { Chat } from 'react-messaging';

export function Example() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    initMessages();
  }, []);

  function initMessages() {
    setMessages([{
      _id: "101",
      text: "Hello",
      user: {
        _id: "26",
        name: "Andrew Robertson",
        username: "RobboSZN",
        avatar: "https://tmssl.akamaized.net/images/portrait/originals/234803-1559827085.jpg"
      },
      date: new Date()
    }, {
      _id: "102",
      text: "Hi",
      user: {
        _id: "100",
        name: "Jurgen Klopp",
        username: "KloppoSZN",
        avatar: "https://i.guim.co.uk/img/media/5445143eab4f7ab92cd015aff5140b60174308a9/162_10_1745_1047/master/1745.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=b017b1381457ec79ad4922db8e295a78"
      },
      date: new Date()
    }]);
  }

  function onSend(text: string) {
    setMessages([...messages, {
      _id: v4(),
      text,
      user: CurrentUser,
      date: new Date()
    }]);
  }

  return (
    <Chat
      messages={messages}
      user={CurrentUser}
      onSend={(text) => onSend(text)} />
  );
}

const CurrentUser = {
  _id: "26",
  name: "Andrew Robertson",
  username: "RobboSZN",
  avatar: "https://tmssl.akamaized.net/images/portrait/originals/234803-1559827085.jpg"
};

Interfaces

Message

export interface Message {
    _id: string;
    text: string;
    user: User;
    date: Date;
    data?: any;
}

User

export interface User {
    _id: string;
    name?: string;
    username?: string;
    avatar?: string;
}

Props

• messages (Message[]) - the array of messages to display, required
• user (User) - the current user, required
• onSend (Function) - the function that runs when the user presses the send button, required
• inputPlaceholder (string) - the placeholder of the input, defaults to "Type a message..."
• dateFormat (string) - the format of the date in the message bubble, defaults to "hh:mm" (check date-fns docs to see valid formats)