react-peer-chat 0.4.3 → 0.5.1

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,10 +118,11 @@ 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. |
-| `onError` | `Function` | No | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support [WebRTC](https://webrtc.org/). |
+| `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`](#Children) | No | - | Props to customize the `<Chat>` component. |
@@ -155,7 +157,5 @@ type ChildrenOptions = {
 };
 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

@@ -7,7 +7,7 @@ export interface DialogOptions {
     position?: DialogPosition;
     style?: CSSProperties;
 }
-type RemotePeers = {
+export type RemotePeers = {
     [id: string]: string;
 };
 export interface Message {
@@ -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,7 +5,7 @@ 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', {});
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "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.28"
   },
   "dependencies": {
-    "peerjs": "^1.5.0"
+    "peerjs": "^1.5.1"
   }
 }