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)
• dayMessageDateFormat (string) - the format of the new day message, defaults to "MMMM do, yyyy" (check date-fns docs to see valid formats)
• showAvatarOnEveryMessage (boolean) - show avatar on every message, even if the same user sent a message twice in a row, defaults to false.
• renderInput (Function) - render custom view for the message input. example down.
• renderSend (Function) - render custom send button. example down.
• renderMessage (Function) - render custom message
• renderAvatar (Function) - render custom avatar in the message, don't use with renderMessage
• renderText (Function) - render custom text in the message, don't use with renderMessage
• renderDate (Function) - render custom date in the message, don't use with renderMessage

useMessaging hook

Are your messages built different than the messages in the Message interface? That's why I made the useMessaging hook.
You have to give it an array of the original message objects, an object of the field names in the original message and a function (or an async function!) to get the user.

example

const arr = [
  {
    _id: '101',
    text: 'Hello',
    sender: '26',
    date: new Date(),
  },
  {
    _id: '102',
    text: 'Hi',
    sender: '100',
    date: new Date(),
  },
];

const users = [
  {
    _id: '26',
    name: 'Andrew Robertson',
  },
  {
    _id: '100',
    name: 'Jurgen Klopp',
  },
];

const { messages } = useMessaging({
  original_messages: arr,
  fields: {
    text: 'text',
    date: 'date',
    user: {
      id: '_id',
    },
  },
  getUser: (message: any) => {
    return users.find((user) => user._id === message.sender);
  },
});

Examples of render methods for custom chat view

renderInput Example

renderInput={(props) => (
  <input
    {...props}  // required
    type="text"/>
)}

"advanced" usage (with libraries for example)

For this example I'll use Material-UI's TextField

renderInput={(props) => (
  <TextField
    fullWidth
    variant="outlined"
    inputRef={props.ref}  // the ref is different in this case
    name={props.name} // not useful for this example, but it's important
    label={'Type a message...'}
  />
)}

renderSend Example

renderSend={(props) => (
  <Button
    {...props}  // required
    >
    Send
  </Button>
)}

renderMessage Example

renderMessage={(message, user) => (
  <p>{user.username}: {message.text} ({format(message.text, 'kk:mm')})<p>
)}

renderText/renderDate Example

renderText={(props, text) => (
  <p>{text}</p>
)}

renderAvatar Example

renderAvatar={(user) => (
  <Avatar alt={user.name} src={user.avatar}/>
)}

Developer

Feel free to DM me on Twitter.

License

Copyright (c) 2020 Kfir Nevo

This project is licensed under the terms of the MIT license. See the MIT file.