react-peer-chat 0.4.2 → 0.5.0

package/README.md

@@ -2,9 +2,10 @@
 An easy to use react component for impleting peer-to-peer chatting using [peerjs](https://peerjs.com/) under the hood.
 
 ## Features
-- Peer-to-peer chat without need to have any knowledge about WebRTC
+- Peer-to-peer chat without need to have any knowledge about [WebRTC](https://webrtc.org/)
 - 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](#Multi-Peer-Usage)
@@ -117,6 +118,7 @@ Here is the full API for the `<Chat>` component, these properties can be set on
 | `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`](#PeerOptions) | No | - | Options to customize peerjs Peer instance. |
 | `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |

package/build/index.d.ts

@@ -28,6 +28,7 @@ export interface ChatProps {
     peerId: string;
     remotePeerId?: RemotePeerId;
     text?: boolean;
+    recoverChat?: boolean;
     voice?: boolean;
     peerOptions?: PeerOptions;
     dialogOptions?: DialogOptions;
@@ -37,5 +38,5 @@ export interface ChatProps {
     props?: Props;
 }
 export type { IconProps } from './icons.js';
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, onMicError, children, props }: ChatProps): React.JSX.Element;
+export default function Chat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, voice, dialogOptions, onError, onMicError, children, props }: ChatProps): React.JSX.Element;
 export declare const clearChat: () => void;

package/build/index.js

@@ -5,17 +5,17 @@ function closeConnection(conn) {
     conn.removeAllListeners();
     conn.close();
 }
-export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, voice = true, dialogOptions, onError = () => alert('Browser not supported! Try some other browser.'), onMicError = () => alert('Microphone not accessible!'), children, props = {} }) {
+export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, voice = true, dialogOptions, onError = () => alert('Browser not supported! Try some other browser.'), onMicError = () => alert('Microphone not accessible!'), children, props = {} }) {
     const [peer, setPeer] = useState();
     const [notification, setNotification] = useState(false);
-    const [remotePeers, setRemotePeers] = useStorage('rpc-remote-peer', {}, { save: true });
-    const [messages, setMessages] = useStorage('rpc-messages', [], { save: true });
+    const [remotePeers, setRemotePeers] = useStorage('rpc-remote-peer', {});
+    const [messages, setMessages] = useStorage('rpc-messages', []);
     const connRef = useRef({});
     const [dialog, setDialog] = useState(false);
     const dialogRef = useRef(null);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const [audio, setAudio] = useStorage('rpc-audio', false, { local: true, save: true });
+    const [audio, setAudio] = useStorage('rpc-audio', false, true);
     const streamRef = useRef(null);
     const localStream = useRef();
     peerId = `rpc-${peerId}`;
@@ -34,16 +34,19 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
     function handleConnection(conn) {
         connRef.current[conn.peer] = conn;
         conn.on('open', () => {
-            conn.on('data', ({ type, message, remotePeerName }) => {
+            conn.on('data', ({ type, message, remotePeerName, messages }) => {
                 if (type === 'message')
                     addMessage(message);
-                else if (type === 'init')
+                else if (type === 'init') {
                     setRemotePeers(prev => {
                         prev[conn.peer] = remotePeerName || 'Anonymous User';
                         return prev;
                     });
+                    if (recoverChat)
+                        setMessages(old => messages.length > old.length ? messages : old);
+                }
             });
-            conn.send({ type: 'init', remotePeerName: name });
+            conn.send({ type: 'init', remotePeerName: name, messages });
         });
         conn.on('close', conn.removeAllListeners);
     }

package/build/storage.d.ts

@@ -1,5 +1,2 @@
 export declare const removeStorage: (key: string, local?: boolean) => void;
-export default function useStorage<Value>(key: string, initialValue: Value, { local, save }?: {
-    local?: boolean | undefined;
-    save?: boolean | undefined;
-}): [Value, (value: Value | ((old: Value) => Value)) => void];
+export default function useStorage<Value>(key: string, initialValue: Value, local?: boolean): [Value, (value: Value | ((old: Value) => Value)) => void];

package/build/storage.js

@@ -2,8 +2,6 @@ import { useState } from "react";
 const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
 export const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
 const getStorage = (key, fallbackValue, local = false) => {
-    if (typeof window === "undefined")
-        return fallbackValue;
     let value = (local ? localStorage : sessionStorage).getItem(key);
     try {
         if (!value)
@@ -22,14 +20,16 @@ const getStorage = (key, fallbackValue, local = false) => {
     }
     return value;
 };
-export default function useStorage(key, initialValue, { local = false, save = false } = {}) {
-    save || (save = getStorage('mode') !== 'online');
-    const [storedValue, setStoredValue] = useState(save ? getStorage(key, initialValue, local) : initialValue);
+export default function useStorage(key, initialValue, local = false) {
+    const [storedValue, setStoredValue] = useState(() => {
+        if (typeof window === "undefined")
+            return initialValue;
+        return getStorage(key, initialValue, local);
+    });
     const setValue = (value) => {
         setStoredValue((old) => {
             const updatedValue = typeof value === 'function' ? value(old) : value;
-            if (save)
-                setStorage(key, updatedValue, local);
+            setStorage(key, updatedValue, local);
             return updatedValue;
         });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",
@@ -34,9 +34,9 @@
     "react-dom": ">=16.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.21"
+    "@types/react": "^18.2.23"
   },
   "dependencies": {
-    "peerjs": "^1.5.0"
+    "peerjs": "^1.5.1"
   }
 }