react-peer-chat 0.3.4 → 0.3.6

package/README.md

@@ -1,2 +1,143 @@
 # 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
+- Clear text chat on command
+- 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
+`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
+```jsx
+import React from 'react';
+import Chat, { clearChat } from 'react-peer-chat';
+import 'react-peer-chat/build/styles.css';
+
+export default function App() {
+    return <div>
+        <Chat
+            name='John Doe'
+            peerId='some-unique-id' 
+            remotePeerId='another-unique-id'
+        />
+        {/* 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.
+```jsx
+import React from 'react';
+import Chat from 'react-peer-chat';
+import 'react-peer-chat/build/styles.css';
+
+export default 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)
+
+export default 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/icons.js

@@ -1,27 +1,27 @@
 import React from "react";
 export function BiSolidMessageDetail(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" })));
 }
 export function BiSolidMessageX(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" })));
 }
 export function GrSend(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down rpc-invert' },
             React.createElement("path", { fill: "none", stroke: "#000", strokeWidth: 2, d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z" })));
 }
 export function BsFillMicFill(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
             React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" })));
 }
 export function BsFillMicMuteFill(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }),
             React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" })));

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

@@ -4,7 +4,7 @@ import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill
 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(() => {
@@ -115,10 +115,10 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         const container = containerRef.current;
         if (container)
             container.scrollTop = container.scrollHeight;
-    }, [dialog, remotePeer, messages]);
-    return React.createElement("div", { className: 'rpc-main', ...props },
-        typeof children === 'function' ? children({ remotePeer, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
-            text && React.createElement("div", null,
+    }, [dialog, remotePeerName, messages]);
+    return React.createElement("div", { className: 'rpc-main rpc-font', ...props },
+        typeof children === 'function' ? children({ remotePeerName, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
+            text && React.createElement("div", { className: 'rpc-dialog-container' },
                 dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) }) : React.createElement("div", { className: 'rpc-notification' },
                     React.createElement(BiSolidMessageDetail, { onClick: () => {
                             setNotification(false);
@@ -127,14 +127,14 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     notification && React.createElement("span", { className: 'rpc-badge' })),
                 React.createElement("dialog", { ref: dialogRef, className: `${dialog ? 'rpc-dialog' : ''} rpc-position-${(dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.position) || 'center'}`, style: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.style },
                     React.createElement("div", { className: 'rpc-heading' }, "Chat"),
-                    React.createElement("hr", null),
+                    React.createElement("hr", { className: 'rpc-hr' }),
                     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),
+                        React.createElement("hr", { className: 'rpc-hr' }),
                         React.createElement("form", { className: 'rpc-input-container', onSubmit: e => {
                                 var _a;
                                 e.preventDefault();
@@ -144,8 +144,8 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                                     addMessage({ id: peerId, text }, true);
                                 }
                             } },
-                            React.createElement("input", { ref: inputRef, className: 'rpc-input', placeholder: 'Enter a message' }),
-                            React.createElement("button", { type: 'submit' },
+                            React.createElement("input", { ref: inputRef, className: 'rpc-input rpc-font', placeholder: 'Enter a message' }),
+                            React.createElement("button", { type: 'submit', className: 'rpc-button' },
                                 React.createElement(GrSend, null)))))),
             voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) }))),
         voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));

package/build/styles.css

@@ -1,9 +1,17 @@
+.rpc-font {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
 .rpc-main {
     display: flex;
     align-items: center;
     column-gap: 0.5rem;
 }
 
+.rpc-dialog-container {
+    position: relative;
+}
+
 .rpc-notification {
     position: relative;
 }
@@ -19,32 +27,35 @@
 }
 
 .rpc-dialog {
-    display: flex;
-    flex-direction: column;
-    row-gap: 0.25rem;
+    position: absolute;
     background-color: black;
     color: white;
-    padding-top: 0.25rem;
-    outline: 2px solid white;
-    border-radius: 0.25rem;
-    font-size: smaller;
+    padding: 0.4rem 0 0.25rem 0;
+    border-radius: 0.4rem;
+    font-size: small;
 }
 
 .rpc-position-left {
-    left: 0.5rem;
+    left: 0.6rem;
     translate: -100%;
 }
 
 .rpc-position-center {
+    left: 0.5rem;
     translate: -50%;
 }
 
 .rpc-position-right {
-    left: 0.5rem;
+    left: 0.3rem;
+}
+
+.rpc-hr {
+    margin: 0.25rem 0;
+    border-color: rgba(255, 255, 255, 0.7);
 }
 
 .rpc-message-container {
-    height: 6rem;
+    height: 8rem;
     overflow-y: scroll;
     padding-inline: 0.5rem;
     margin-bottom: 0.25rem;
@@ -64,29 +75,47 @@
 
 .rpc-heading {
     text-align: center;
+    font-size: medium;
     font-weight: bold;
     padding-inline: 0.5rem;
 }
 
 .rpc-input-container {
     display: flex;
+    width: 15rem;
+    max-width: 90vw;
     column-gap: 0.25rem;
-    padding-inline: 0.5rem;
-    padding-block: 0.4rem;
+    padding: 0.25rem 0.5rem;
 }
 
 .rpc-input {
+    color: white;
+    width: 100%;
     background-color: black;
     border: none;
     outline: 1px solid rgba(255, 255, 255, 0.8);
     border-radius: 0.25rem;
-    padding-inline: 0.25rem;
+    padding: 0.35rem 0.25rem;
+}
+
+.rpc-input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .rpc-input:focus {
     outline: 2px solid white;
 }
 
+.rpc-button {
+    all: unset;
+    display: flex;
+}
+
+.rpc-icon-container {
+    display: flex;
+    align-items: center;
+}
+
 .rpc-scale-down {
     scale: calc(2/3);
 }

package/package.json

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