React-peer-chat NPM

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;