react-peer-chat

A simple-to-use React component for implementing peer-to-peer chatting, powered by peerjs.

Features

• Peer-to-peer chat without requiring knowledge of WebRTC
• Easy integration
• Supports persistent text chat across page reloads
• Recovers old chats upon reconnection
• Option to clear chat on command
• Supports audio/voice chat
• Multiple peer connections. See multi-peer usage
• Fully customizable. See usage with FaC

Installation

To install react-peer-chat:

  # with npm:
  npm install react-peer-chat --save

  # with yarn:
  yarn add react-peer-chat

  # with pnpm:
  pnpm add react-peer-chat

  # with bun:
  bun add react-peer-chat

Usage

react-peer-chat provides two primary methods to integrate chat functionality into your React apps: through the <Chat> component and the useSpeech hook.

It also exports a clearChat function that clears the text chat from the browser's session storage when called.

Chat Component

The default export of react-peer-chat is the <Chat> component, which offers the easiest integration and is fully configurable. When using the <Chat> component, the user will initially see two buttons (SVG icons) - one for text chat and the other for voice chat.

Basic Usage

import React from "react";
import Chat, { clearChat } from "react-peer-chat";
import "react-peer-chat/styles.css";

export default function App() {
  return (
    <div>
      <Chat name="John Doe" peerId="my-unique-id" remotePeerId="remote-unique-id" />
      {/* Text chat will be cleared when following button is clicked. */}
      <button onClick={clearChat}>Clear Chat</button>
    </div>
  );
}

Multi Peer Usage

import React from "react";
import Chat, { clearChat } from "react-peer-chat";
import "react-peer-chat/styles.css";

export default function App() {
  return (
    <div>
      <Chat
        name="John Doe"
        peerId="my-unique-id"
        remotePeerId={["remote-unique-id-1", "remote-unique-id-2", "remote-unique-id-3"]} // Array of remote peer ids
      />
      {/* Text chat will be cleared when following button is clicked. */}
      <button onClick={clearChat}>Clear Chat</button>
    </div>
  );
}

Partial Customization

Use the props provided by the <Chat> component for customization.

import React from "react";
import Chat from "react-peer-chat";
import "react-peer-chat/styles.css";

export default function App() {
  return (
    <Chat
      name="John Doe"
      peerId="my-unique-id"
      remotePeerId="remote-unique-id"
      dialogOptions={{
        position: "left",
        style: { padding: "4px" },
      }}
      props={{ title: "React Peer Chat Component" }}
      onError={() => console.error("Browser not supported!")}
      onMicError={() => console.error("Microphone not accessible!")}
    />
  );
}

Full Customization

Use Function as Children (FaC) to fully customize the <Chat> component.

import React from 'react'
import Chat from 'react-peer-chat'
// import 'react-peer-chat/styles.css' (No need to import CSS when using custom component)

export default function App() {
    return <Chat
        name='John Doe'
        peerId='my-unique-id'
        remotePeerId='remote-unique-id'
        onError={() => console.error('Browser not supported!')}
        onMicError={() => console.error('Microphone not accessible!')}
    >
        {({ remotePeers, messages, sendMessage, audio, setAudio }) => (
            <YourCustomComponent>
                {...}
            </YourCustomComponent>
        )}
    </Chat>
}

Custom ICE Servers

You can also provide custom ICE servers to avoid connectivity issues if the free TURN server provided by react-peer-chat expires.

import React from "react";
import Chat from "react-peer-chat";
import "react-peer-chat/styles.css";

export default function App() {
  return (
    <Chat
      name="John Doe"
      peerId="my-unique-id"
      remotePeerId="remote-unique-id"
      peerOptions={{
        config: {
          iceServers: [
            { urls: "stun:stun-server.example.com:19302" },
            {
              urls: "turn:turn-server.example.com:19403",
              username: "optional-username",
              credential: "auth-token",
            },
          ],
        },
        // other peerjs options (optional)
      }}
    />
  );
}

useChat Hook

The useChat hook is ideal when you want to completely redesign the Chat UI or handle the audio stream differently, instead of using traditional playback methods.

import React, { useEffect, useRef, useState } from "react";
import { clearChat, useChat } from "react-peer-chat";
import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "react-peer-chat/icons";
import "react-peer-chat/styles.css"; // (No need to import CSS when using custom styles)

function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
  const { peerId, audioStreamRef, ...childrenOptions } = useChat({
    text,
    audio,
    onMessageReceived: modifiedOnMessageReceived,
    ...hookProps,
  });
  const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
  const containerRef = useRef(null);
  const [dialog, setDialog] = useState(false);
  const dialogRef = useRef(null);
  const inputRef = useRef(null);
  const [notification, setNotification] = useState(false);

  function modifiedOnMessageReceived(message) {
    if (!dialogRef.current?.open) setNotification(true);
    onMessageReceived?.(message);
  }

  useEffect(() => {
    if (dialog) dialogRef.current?.show();
    else dialogRef.current?.close();
  }, [dialog]);

  useEffect(() => {
    const container = containerRef.current;
    if (container) container.scrollTop = container.scrollHeight;
  }, [dialog, remotePeers, messages]);

  return (
    <div className="rpc-main rpc-font" {...props}>
      {typeof children === "function" ? (
        children(childrenOptions)
      ) : (
        <>
          {text && (
            <div className="rpc-dialog-container">
              {dialog ? (
                <BiSolidMessageX title="Close chat" onClick={() => setDialog(false)} />
              ) : (
                <div className="rpc-notification">
                  <BiSolidMessageDetail
                    title="Open chat"
                    onClick={() => {
                      setNotification(false);
                      setDialog(true);
                    }}
                  />
                  {notification && <span className="rpc-badge" />}
                </div>
              )}
              <dialog ref={dialogRef} className={`${dialog ? "rpc-dialog" : ""} rpc-position-${dialogOptions?.position || "center"}`} style={dialogOptions?.style}>
                <div className="rpc-heading">Chat</div>
                <hr className="rpc-hr" />
                <div>
                  <div ref={containerRef} className="rpc-message-container">
                    {messages.map(({ id, text }, i) => (
                      <div key={i}>
                        <strong>{id === peerId ? "You" : remotePeers[id]}: </strong>
                        <span>{text}</span>
                      </div>
                    ))}
                  </div>
                  <hr className="rpc-hr" />
                  <form
                    className="rpc-input-container"
                    onSubmit={(e) => {
                      e.preventDefault();
                      const text = inputRef.current?.value;
                      if (text) {
                        inputRef.current.value = "";
                        sendMessage({ id: peerId, text });
                      }
                    }}
                  >
                    <input ref={inputRef} className="rpc-input rpc-font" placeholder="Enter a message" />
                    <button type="submit" className="rpc-button">
                      <GrSend title="Send message" />
                    </button>
                  </form>
                </div>
              </dialog>
            </div>
          )}
          {audio && <button>{audioEnabled ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)} /> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)} />}</button>}
        </>
      )}
      {audio && audioEnabled && <audio ref={audioStreamRef} autoPlay style={{ display: "none" }} />}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Chat name="John Doe" peerId="my-unique-id" remotePeerId="remote-unique-id" />
      {/* Text chat will be cleared when following button is clicked. */}
      <button onClick={clearChat}>Clear Chat</button>
    </div>
  );
}

Basic Usage

API Reference

useChat Hook

Here is the full API for the useChat hook, these options can be passed as paramerters to the hook:

Parameter	Type	Required	Default	Description
name	string	No	Anonymous User	Name of the peer which will be shown to the remote peer.
peerId	string	Yes	-	It is the unique id that is alloted to a peer. It uniquely identifies a peer from other peers.
remotePeerId	string | string[]	No	-	It is the unique id (or array of unique ids) of the remote peer(s). If provided, the peer will try to connect to the remote peer(s).
text	boolean	No	true	Text chat will be enabled if this property is set to true.
recoverChat	boolean	No	false	Old chats will be recovered upon reconnecting with the same peer(s).
audio	boolean	No	true	Voice chat will be enabled if this property is set to true.
peerOptions	PeerOptions	No	-	Options to customize peerjs Peer instance.
onError	Function	No	() => alert('Browser not supported! Try some other browser.')	Function to be executed if browser doesn't support WebRTC
onMicError	Function	No	() => alert('Microphone not accessible!')	Function to be executed when microphone is not accessible.
onMessageSent	Function	No	-	Function to be executed when a text message is sent to other peers.
onMessageReceived	Function	No	-	Function to be executed when a text message is received from other peers.

Chat Component

Here is the full API for the <Chat> component, these properties can be set on an instance of <Chat>. It contains all the parameters that are listed in useChat Hook API Reference along with the following parameters:

Parameter	Type	Required	Default	Description
dialogOptions	DialogOptions	No	{ position: 'center' }	Options to customize text dialog box styling.
props	React.DetailedHTMLProps	No	-	Props to customize the <Chat> component.
children	Children	No	-	See usage with FaC

Types

PeerOptions

import { PeerOptions } from "peerjs";

DialogOptions

import { CSSProperties } from "react";
type DialogPosition = "left" | "center" | "right";
type DialogOptions = {
  position: DialogPosition;
  style: CSSProperties;
};

Children

import { ReactNode } from "react";
type RemotePeers = { [id: string]: string };
type Message = {
  id: string;
  text: string;
};
type ChildrenOptions = {
  remotePeers?: RemotePeers;
  messages?: Message[];
  sendMessage?: (message: Message) => void;
  audio?: boolean;
  setAudio?: (audio: boolean) => void;
};
type Children = (childrenOptions: ChildrenOptions) => ReactNode;

Author

Sahil Aggarwal