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