react-messaging

The perfect chat component for ReactJS

Usage no npm install needed!

<script type="module">
  import reactMessaging from 'https://cdn.skypack.dev/react-messaging';
</script>

README

THIS PACKAGE IS IN EARLY DEVELOPMENT!

react-messaging

NPM
npm Libraries.io dependency status for latest release npm (tag) NPM

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

Twitter Follow
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.