react-peer-chat 0.3.3 → 0.3.5

package/README.md

@@ -1,2 +1,140 @@
 # react-peer-chat
-An easy to use react component for impleting peer-to-peer chatting.
+An easy to use react component for impleting peer-to-peer chatting using [peerjs](https://peerjs.com/) under the hood.
+
+It is as easy as to import a React component!
+## Features
+- Peer-to-peer chat without need to have any knowledge about WebRTC
+- Easy to use
+- Supports text chat that persists on page reload
+- Supports voice chat
+- Fully Customizable. See [usage with FoC](#Full-Customization)
+## Installation
+To install react-peer-chat
+```bash
+  # 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
+When you use the `<Chat>` component of `react-peer-chat`, initially the user will see 2 buttons(svg icons), one for text chat and other for voice chat.
+#### Basic Usage
+```jsx
+import React, { useEffect } from 'react';
+import Chat, { clearChat } from 'react-peer-chat';
+import 'react-peer-chat/build/styles.css';
+
+function App() {
+    useEffect(() => {
+        return clearChat // clear the chat when app is unmounted
+    }, [])
+
+    return <Chat
+        name='John Doe'
+        peerId='some-unique-id' 
+        remotePeerId='another-unique-id'
+    />
+}
+```
+#### Partial Customization
+Use props provided by `<Chat>` component to customize it.
+```jsx
+import React from 'react';
+import Chat from 'react-peer-chat';
+import 'react-peer-chat/build/styles.css';
+
+function App() {
+    return <Chat 
+        name='John Doe'
+        peerId='some-unique-id'
+        remotePeerId='another-unique-id'
+        dialogOptions={{ 
+            position: 'left',
+            style: { padding: '4px' }
+        }}
+        props={{ title: 'React Peer Chat Component' }}
+        onError={() => {
+            console.error('Microphone not accessible!');
+        }}
+    />
+}
+```
+#### Full Customization 
+Use Function as Children(FoC) to fully customize the `<Chat>` component.
+```jsx
+import React from 'react'
+import Chat from 'react-peer-chat'
+// import 'react-peer-chat/build/styles.css' (No need to import CSS when using custom component)
+
+function App() {
+    return <Chat
+        name='John Doe'
+        peerId='some-unique-id'
+        remotePeerId='another-unique-id'
+        onError={() => {
+            console.error('Microphone not accessible!');
+        }}
+    >
+        {({ remotePeerName, messages, addMessage, audio, setAudio }) => (
+            <YourCustomComponent>
+                {...}
+            </YourCustomComponent>
+        )}
+    </Chat>
+}
+```
+## 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` | No | - | It is the unique id of the remote peer. If provided, the peer will try to connect to the remote peer. |
+| `text` | `Boolean` | No | `true` | Text chat will be enabled if this property is set to true. |
+| `voice` | `Boolean` | No | `true` | Voice chat will be enabled if this property is set to true. |
+| `peerOptions` | [`PeerOptions`](#PeerOptions) | No | - | Options to customize peerjs Peer instance. |
+| `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |
+| `onError` | `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`](#Children) | No | - | Props to customize the `<Chat>` component. |
+### Types
+#### PeerOptions
+```typescript
+import { PeerOptions } from 'peerjs'
+```
+#### DialogOptions
+```typescript
+import { CSSProperties } from 'react';
+type DialogPosition = 'left' | 'center' | 'right';
+type DialogOptions = {
+    position: DialogPosition;
+    style: CSSProperties;
+};
+```
+#### Children
+```typescript
+import { ReactNode } from 'react';
+type Message = {
+    id: string;
+    text: string;
+};
+type ChildrenOptions = {
+    remotePeerName?: string;
+    messages?: Message[];
+    addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
+    audio?: boolean;
+    setAudio?: (audio: boolean) => void;
+};
+type Children = (childrenOptions: ChildrenOptions) => ReactNode;
+```
+## Used By
+- [StarWars](https://starwarsgame.vercel.app/)
+## Author
+[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

package/build/index.d.ts

@@ -5,7 +5,7 @@ type Message = {
     text: string;
 };
 type ChildrenOptions = {
-    remotePeer?: string;
+    remotePeerName?: string;
     messages?: Message[];
     addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
     audio?: boolean;
@@ -24,7 +24,7 @@ type Props = {
     voice?: boolean;
     peerOptions?: PeerOptions;
     dialogOptions?: DialogOptions;
-    onError?: () => void;
+    onError?: Function;
     children?: (childrenOptions: ChildrenOptions) => ReactNode;
     props?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 };

package/build/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import useStorage, { removeStorage } from './storage.js';
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './icons.js';
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text = true, voice = true, dialogOptions, onError = () => console.error("Can not access microphone!"), children, props = {} }) {
+export default function Chat({ name, peerId, remotePeerId, peerOptions, text = true, voice = true, dialogOptions, onError = () => alert("Microphone not accessible!"), children, props = {} }) {
     const [peer, setPeer] = useState();
     const [notification, setNotification] = useState(false);
-    const [remotePeer, setRemotePeer] = useStorage('rpc-remote-peer', '', { save: true });
+    const [remotePeerName, setRemotePeer] = useStorage('rpc-remote-peer', '', { save: true });
     const [messages, setMessages] = useStorage('rpc-messages', [], { save: true });
     const connRef = useRef();
     const [dialog, setDialog] = useState(false);
@@ -26,11 +26,11 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
     function handleConnection(conn) {
         connRef.current = conn;
         conn.on('open', () => {
-            conn.on('data', ({ type, message, remotePeer, messages }) => {
+            conn.on('data', ({ type, message, remotePeerName, messages }) => {
                 if (type === 'message')
                     addMessage(message);
                 else if (type === 'init') {
-                    setRemotePeer(remotePeer || 'Anonymous User');
+                    setRemotePeer(remotePeerName || 'Anonymous User');
                     setMessages(old => {
                         if (messages.length > old.length)
                             return messages;
@@ -38,7 +38,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     });
                 }
             });
-            conn.send({ type: 'init', remotePeer: name, messages });
+            conn.send({ type: 'init', remotePeerName: name, messages });
         });
     }
     useEffect(() => {
@@ -64,27 +64,32 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
             }
             if (audio) {
                 const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-                getUserMedia({
-                    video: false,
-                    audio: {
-                        autoGainControl: false,
-                        noiseSuppression: true,
-                        echoCancellation: true
-                    }
-                }, (stream) => {
-                    localStream.current = stream;
-                    if (remotePeerId) {
-                        call = peer.call(remotePeerId, stream);
-                        call.on('stream', handleRemoteStream);
-                        call.on('close', call.removeAllListeners);
-                    }
-                    peer.on('call', e => {
-                        call = e;
-                        call.answer(stream);
-                        call.on('stream', handleRemoteStream);
-                        call.on('close', call.removeAllListeners);
-                    });
-                }, onError);
+                try {
+                    getUserMedia({
+                        video: false,
+                        audio: {
+                            autoGainControl: false,
+                            noiseSuppression: true,
+                            echoCancellation: true
+                        }
+                    }, (stream) => {
+                        localStream.current = stream;
+                        if (remotePeerId) {
+                            call = peer.call(remotePeerId, stream);
+                            call.on('stream', handleRemoteStream);
+                            call.on('close', call.removeAllListeners);
+                        }
+                        peer.on('call', e => {
+                            call = e;
+                            call.answer(stream);
+                            call.on('stream', handleRemoteStream);
+                            call.on('close', call.removeAllListeners);
+                        });
+                    }, onError);
+                }
+                catch (_a) {
+                    onError();
+                }
             }
         });
         peer.on('connection', handleConnection);
@@ -110,9 +115,9 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         const container = containerRef.current;
         if (container)
             container.scrollTop = container.scrollHeight;
-    }, [dialog, remotePeer, messages]);
+    }, [dialog, remotePeerName, messages]);
     return React.createElement("div", { className: 'rpc-main', ...props },
-        typeof children === 'function' ? children({ remotePeer, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
+        typeof children === 'function' ? children({ remotePeerName, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
             text && React.createElement("div", null,
                 dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) }) : React.createElement("div", { className: 'rpc-notification' },
                     React.createElement(BiSolidMessageDetail, { onClick: () => {
@@ -126,7 +131,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     React.createElement("div", null,
                         React.createElement("div", { ref: containerRef, className: 'rpc-message-container' }, messages.map(({ id, text }, i) => React.createElement("div", { key: i },
                             React.createElement("strong", null,
-                                id === peerId ? 'You' : remotePeer,
+                                id === peerId ? 'You' : remotePeerName,
                                 ": "),
                             React.createElement("span", null, text)))),
                         React.createElement("hr", null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",