react-peer-chat

An easy to use react component for impleting peer-to-peer chatting using peerjs under the hood.

Features

• Peer-to-peer chat without need to have any knowledge about WebRTC
• Easy to use
• Supports text chat that persists on page reload
• Recovers old chat upon reconnection
• Clear text chat on command
• Supports 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 default exports <Chat> component. When you use the <Chat> component, initially the user will see 2 buttons (svg icons), one for text chat and other for voice chat.

It also exports a clearChat function that clears the text chat whenever invoked.

Basic Usage

import React from 'react';
import Chat, { clearChat } from 'react-peer-chat';
import 'react-peer-chat/dist/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/dist/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 props provided by <Chat> component to customize it.

import React from 'react';
import Chat from 'react-peer-chat';
import 'react-peer-chat/dist/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/dist/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, addMessage, audio, setAudio }) => (
            <YourCustomComponent>
                {...}
            </YourCustomComponent>
        )}
    </Chat>
}

Custom ICE Servers

You can also use custom ICE servers to avoid any connectivity issues in case free TURN server limit provided by react-peer-chat expires.

import React from 'react';
import Chat from 'react-peer-chat';
import 'react-peer-chat/dist/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)
        }}
    />
}

Chat Component API Reference

Here is the full API for the <Chat> component, these properties can be set on an instance of Chat:

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).
voice	boolean	No	true	Voice chat will be enabled if this property is set to true.
peerOptions	PeerOptions	No	-	Options to customize peerjs Peer instance.
dialogOptions	DialogOptions	No	{ position: 'center' }	Options to customize text dialog box styling.
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.
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[];
    addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
    audio?: boolean;
    setAudio?: (audio: boolean) => void;
};
type Children = (childrenOptions: ChildrenOptions) => ReactNode;

Author

Sahil Aggarwal