react-peer-chat 0.8.4 → 0.8.5

package/README.md

@@ -10,8 +10,8 @@ A simple-to-use React component for implementing peer-to-peer chatting, powered
 - Recovers old chats upon reconnection
 - Option to clear chat on command
 - Supports audio/voice chat
-- Multiple peer connections. See [multi-peer usage](#Multi-Peer-Usage)
-- Fully customizable. See [usage with FaC](#Full-Customization)
+- Multiple peer connections. See [multi-peer usage](#multi-peer-usage)
+- Fully customizable. See [usage with FaC](#full-customization)
 
 ## Installation
 
@@ -79,6 +79,8 @@ export default function App() {
 }
 ```
 
+> **Note:** The `remotePeerId` prop is read at mount and whenever `peerId` changes. Changes to `remotePeerId` alone (without `peerId` changing) won't establish new connections. In peer-to-peer chat scenarios, new peers should connect to existing peers by providing their IDs at mount time, rather than existing peers updating this prop dynamically.
+
 #### Partial Customization
 
 Use the props provided by the `<Chat>` component for customization.
@@ -289,36 +291,51 @@ export default function App() {
 ### useChat Hook
 
 Here is the full API for the `useChat` hook, these options can be passed as paramerters to the hook:
-| 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). |
-| `audio` | `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. |
-| `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. |
-| `onMessageSent` | `Function` | No | - | Function to be executed when a text message is sent to other peers. |
-| `onMessageReceived` | `Function` | No | - | Function to be executed when a text message is received from other peers. |
+
+| 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       | -                                                               | Unique id(s) of remote peer(s) to connect to. Read at mount and when `peerId` changes; changes to this prop alone won't create new connections. |
+| `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).                                                                            |
+| `audio`             | `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.                                                                                                      |
+| `onError`           | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support `WebRTC`                                                                                     |
+| `onMicError`        | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Microphone not accessible!')`                     | Function to be executed when microphone is not accessible.                                                                                      |
+| `onMessageSent`     | [`MessageEventHandler`](#messageeventhandler) | No       | -                                                               | Function to be executed when a text message is sent to other peers.                                                                             |
+| `onMessageReceived` | [`MessageEventHandler`](#messageeventhandler) | No       | -                                                               | Function to be executed when a text message is received from other peers.                                                                       |
 
 ### Chat Component
 
 Here is the full API for the `<Chat>` component, these properties can be set on an instance of `<Chat>`. It contains all the parameters
 that are listed in [useChat Hook API Reference](#usechat-hook-1) along with the following parameters:
-| Parameter | Type | Required | Default | Description |
-| - | - | - | - | - |
-| `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |
-| `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<Chat>` component. |
-| `children` | [`Children`](#Children) | No | - | See [usage with FaC](#Full-Customization) |
+
+| Parameter       | Type                              | Required | Default                | Description                                   |
+| --------------- | --------------------------------- | -------- | ---------------------- | --------------------------------------------- |
+| `dialogOptions` | [`DialogOptions`](#dialogoptions) | No       | { position: 'center' } | Options to customize text dialog box styling. |
+| `props`         | [`DivProps`](#divprops)           | No       | -                      | Props to customize the `<Chat>` component.    |
+| `children`      | [`Children`](#children)           | No       | -                      | See [usage with FaC](#full-customization)     |
 
 ### Types
 
-#### PeerOptions
+#### Children
 
 ```typescript
-import { PeerOptions } from "peerjs";
+import { ReactNode } from "react";
+type RemotePeers = { [id: string]: string };
+type Message = {
+  id: string;
+  text: string;
+};
+type ChildrenOptions = {
+  remotePeers?: RemotePeers;
+  messages?: Message[];
+  sendMessage?: (message: Message) => void;
+  audio?: boolean;
+  setAudio?: (audio: boolean) => void;
+};
+type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 ```
 
 #### DialogOptions
@@ -332,25 +349,35 @@ type DialogOptions = {
 };
 ```
 
-#### Children
+#### DivProps
+
+```typescript
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+```
+
+#### ErrorHandler
+
+```typescript
+type ErrorHandler = () => void;
+```
+
+#### MessageEventHandler
 
 ```typescript
-import { ReactNode } from "react";
-type RemotePeers = { [id: string]: string };
 type Message = {
   id: string;
   text: string;
 };
-type ChildrenOptions = {
-  remotePeers?: RemotePeers;
-  messages?: Message[];
-  sendMessage?: (message: Message) => void;
-  audio?: boolean;
-  setAudio?: (audio: boolean) => void;
-};
-type Children = (childrenOptions: ChildrenOptions) => ReactNode;
+type MessageEventHandler = (message: Message) => void;
+```
+
+#### PeerOptions
+
+```typescript
+import { PeerOptions } from "peerjs";
 ```
 
-## Author
+## License
 
-[Sahil Aggarwal](https://github.com/SahilAggarwal2004)
+This project is licensed under the [MIT License](LICENSE).

package/dist/chunks/{chunk-4CBQRGQ3.js → chunk-NXKKI6WY.js}

@@ -1,6 +1,8 @@
 import React from 'react';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,6 +18,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -28,26 +31,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 function BiSolidMessageDetail(props) {
   return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ 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" })));
 }
@@ -72,4 +55,4 @@ function BsFillMicMuteFill(props) {
   return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ 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" }), /* @__PURE__ */ 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" })));
 }
 
-export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend, __async, __objRest, __spreadValues };
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend, __objRest, __spreadProps, __spreadValues };

package/dist/icons.d.ts

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import React from 'react';
 import { IconProps } from './types.js';
 import 'peerjs';
 
-declare function BiSolidMessageDetail(props: IconProps): React__default.JSX.Element;
-declare function BiSolidMessageX(props: IconProps): React__default.JSX.Element;
-declare function GrSend(props: IconProps): React__default.JSX.Element;
-declare function BsFillMicFill(props: IconProps): React__default.JSX.Element;
-declare function BsFillMicMuteFill(props: IconProps): React__default.JSX.Element;
+declare function BiSolidMessageDetail(props: IconProps): React.JSX.Element;
+declare function BiSolidMessageX(props: IconProps): React.JSX.Element;
+declare function GrSend(props: IconProps): React.JSX.Element;
+declare function BsFillMicFill(props: IconProps): React.JSX.Element;
+declare function BsFillMicMuteFill(props: IconProps): React.JSX.Element;
 
 export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/icons.js

@@ -1 +1 @@
-export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './chunks/chunk-4CBQRGQ3.js';
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './chunks/chunk-NXKKI6WY.js';

package/dist/index.d.ts

@@ -1,20 +1,11 @@
-import * as React from 'react';
-import React__default from 'react';
-import { useChatProps, RemotePeers, Message, ChatProps } from './types.js';
+import React from 'react';
+import { UseChatProps, UseChatReturn, ChatProps } from './types.js';
 import 'peerjs';
 
-declare function useChat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: useChatProps): {
-    peerId: string;
-    audioStreamRef: React.RefObject<HTMLMediaElement | null>;
-    remotePeers: RemotePeers;
-    messages: Message[];
-    sendMessage: (message: Message) => void;
-    audio: boolean;
-    setAudio: (value: boolean | ((old: boolean) => boolean)) => void;
-};
+declare function useChat({ peerId, name, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: UseChatProps): UseChatReturn;
 
 declare const clearChat: () => void;
 
-declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React__default.JSX.Element;
+declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React.JSX.Element;
 
 export { clearChat, Chat as default, useChat };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { __spreadValues, __async, __objRest, BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill } from './chunks/chunk-4CBQRGQ3.js';
-import React, { useRef, useState, useEffect } from 'react';
+import { __spreadValues, __objRest, BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill, __spreadProps } from './chunks/chunk-NXKKI6WY.js';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 
 // src/constants.ts
 var turnAccounts = [
@@ -10,21 +10,25 @@ var turnAccounts = [
   { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
   { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" }
 ];
-var defaultConfig = {
-  iceServers: [
-    {
-      urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"]
-    }
-  ].concat(
-    turnAccounts.map((account) => __spreadValues({
-      urls: [
-        "turn:standard.relay.metered.ca:80",
-        "turn:standard.relay.metered.ca:80?transport=tcp",
-        "turn:standard.relay.metered.ca:443",
-        "turns:standard.relay.metered.ca:443?transport=tcp"
-      ]
-    }, account))
-  )
+var defaults = {
+  config: {
+    iceServers: [
+      {
+        urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"]
+      }
+    ].concat(
+      turnAccounts.map((account) => __spreadValues({
+        urls: [
+          "turn:standard.relay.metered.ca:80",
+          "turn:standard.relay.metered.ca:80?transport=tcp",
+          "turn:standard.relay.metered.ca:443",
+          "turns:standard.relay.metered.ca:443?transport=tcp"
+        ]
+      }, account))
+    )
+  },
+  peerOptions: {},
+  remotePeerId: []
 };
 
 // src/lib/connection.ts
@@ -34,38 +38,41 @@ function closeConnection(conn) {
 }
 
 // src/lib/storage.ts
-var removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
-var setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
-var getStorage = (key, fallbackValue, local = false) => {
-  let value = (local ? localStorage : sessionStorage).getItem(key);
-  try {
-    if (!value) throw new Error("Value doesn't exist");
-    value = JSON.parse(value);
-  } catch (e) {
-    if (fallbackValue !== void 0) {
-      value = fallbackValue;
-      setStorage(key, value, local);
-    } else {
-      value = null;
-      removeStorage(key, local);
-    }
-  }
-  return value;
-};
+var getStorageInstance = (local = true) => local ? localStorage : sessionStorage;
+var removeStorage = (key, local = true) => getStorageInstance(local).removeItem(key);
 var clearChat = () => {
   removeStorage("rpc-remote-peer");
   removeStorage("rpc-messages");
 };
+var setStorage = (key, value, local = true) => getStorageInstance(local).setItem(key, JSON.stringify(value));
+function getStorage(key, fallbackValue, local = true) {
+  const value = getStorageInstance(local).getItem(key);
+  if (value) {
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      removeStorage(key, local);
+    }
+  }
+  if (fallbackValue !== void 0) setStorage(key, fallbackValue, local);
+  return fallbackValue;
+}
 
 // src/lib/utils.ts
 var addPrefix = (str) => `rpc-${str}`;
 
+// src/lib/react.ts
+function isSetStateFunction(v) {
+  return typeof v === "function";
+}
+
 // src/hooks.ts
+var { config: defaultConfig, peerOptions: defaultPeerOptions, remotePeerId: defaultRemotePeerId } = defaults;
 function useChat({
-  name,
   peerId,
-  remotePeerId = [],
-  peerOptions,
+  name = "Anonymous User",
+  remotePeerId = defaultRemotePeerId,
+  peerOptions = defaultPeerOptions,
   text = true,
   recoverChat = false,
   audio: allowed = true,
@@ -74,26 +81,25 @@ function useChat({
   onMessageSent,
   onMessageReceived
 }) {
+  const [peer, setPeer] = useState();
   const [audio, setAudio] = useAudio(allowed);
-  const audioStreamRef = useRef(null);
   const connRef = useRef({});
-  const localStream = useRef(null);
+  const localStreamRef = useRef(null);
+  const audioStreamRef = useRef(null);
+  const callsRef = useRef({});
   const [messages, setMessages, addMessage] = useMessages();
-  const [peer, setPeer] = useState();
   const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
-  peerId = addPrefix(peerId);
-  if (typeof remotePeerId === "string") remotePeerId = [remotePeerId];
-  const remotePeerIds = remotePeerId.map(addPrefix);
+  const { completePeerId, completeRemotePeerIds } = useMemo(() => {
+    const remotePeerIds = Array.isArray(remotePeerId) ? remotePeerId : [remotePeerId];
+    return { completePeerId: addPrefix(peerId), completeRemotePeerIds: remotePeerIds.map(addPrefix) };
+  }, [peerId]);
   function handleConnection(conn) {
     connRef.current[conn.peer] = conn;
     conn.on("open", () => {
       conn.on("data", ({ message, messages: messages2, remotePeerName, type }) => {
         if (type === "message") receiveMessage(message);
         else if (type === "init") {
-          setRemotePeers((prev) => {
-            prev[conn.peer] = remotePeerName || "Anonymous User";
-            return prev;
-          });
+          setRemotePeers((prev) => __spreadProps(__spreadValues({}, prev), { [conn.peer]: remotePeerName }));
           if (recoverChat) setMessages((old) => messages2.length > old.length ? messages2 : old);
         }
       });
@@ -118,80 +124,76 @@ function useChat({
     onMessageSent == null ? void 0 : onMessageSent(message);
   }
   useEffect(() => {
-    if (!text && !audio) {
-      setPeer(void 0);
-      return;
-    }
-    (function() {
-      return __async(this, null, function* () {
-        const {
-          Peer,
-          util: {
-            supports: { audioVideo, data }
-          }
-        } = yield import('peerjs');
+    if (!text && !audio) return;
+    import('peerjs').then(
+      ({
+        Peer,
+        util: {
+          supports: { audioVideo, data }
+        }
+      }) => {
         if (!data || !audioVideo) return onError();
-        const peer2 = new Peer(peerId, __spreadValues({ config: defaultConfig }, peerOptions));
+        const peer2 = new Peer(completePeerId, __spreadValues({ config: defaultConfig }, peerOptions));
+        peer2.on("connection", handleConnection);
         setPeer(peer2);
+      }
+    );
+    return () => {
+      setPeer((prev) => {
+        prev == null ? void 0 : prev.removeAllListeners();
+        prev == null ? void 0 : prev.destroy();
+        return void 0;
       });
-    })();
-  }, [audio]);
+    };
+  }, [completePeerId]);
   useEffect(() => {
-    if (!peer) return;
-    let calls = {};
-    peer.on("open", () => {
-      remotePeerIds.forEach((id) => {
-        if (text) handleConnection(peer.connect(id));
-      });
-      if (audio) {
-        const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-        try {
-          getUserMedia(
-            {
-              video: false,
-              audio: {
-                autoGainControl: false,
-                // Disable automatic gain control
-                noiseSuppression: true,
-                // Enable noise suppression
-                echoCancellation: true
-                // Enable echo cancellation
-              }
-            },
-            (stream) => {
-              localStream.current = stream;
-              remotePeerIds.forEach((id) => {
-                const call = peer.call(id, stream);
-                call.on("stream", handleRemoteStream);
-                call.on("close", call.removeAllListeners);
-                calls[id] = call;
-              });
-              peer.on("call", (call) => {
-                call.answer(stream);
-                call.on("stream", handleRemoteStream);
-                call.on("close", call.removeAllListeners);
-                calls[call.peer] = call;
-              });
-            },
-            handleError
-          );
-        } catch (e) {
-          handleError();
-        }
-      }
-    });
-    peer.on("connection", handleConnection);
+    if (!text || !peer) return;
+    const handleOpen = () => completeRemotePeerIds.forEach((id) => handleConnection(peer.connect(id)));
+    if (peer.open) handleOpen();
+    else peer.once("open", handleOpen);
     return () => {
-      var _a;
-      (_a = localStream.current) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
       Object.values(connRef.current).forEach(closeConnection);
       connRef.current = {};
-      Object.values(calls).forEach(closeConnection);
-      peer.removeAllListeners();
-      peer.destroy();
     };
-  }, [peer]);
-  return { peerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
+  }, [text, peer]);
+  useEffect(() => {
+    if (!audio || !peer) return;
+    const setupAudio = () => navigator.mediaDevices.getUserMedia({
+      video: false,
+      audio: {
+        autoGainControl: false,
+        // Disable automatic gain control
+        noiseSuppression: true,
+        // Enable noise suppression
+        echoCancellation: true
+        // Enable echo cancellation
+      }
+    }).then((stream) => {
+      localStreamRef.current = stream;
+      completeRemotePeerIds.forEach((id) => {
+        const call = peer.call(id, stream);
+        call.on("stream", handleRemoteStream);
+        call.on("close", call.removeAllListeners);
+        callsRef.current[id] = call;
+      });
+      peer.on("call", (call) => {
+        call.answer(stream);
+        call.on("stream", handleRemoteStream);
+        call.on("close", call.removeAllListeners);
+        callsRef.current[call.peer] = call;
+      });
+    }).catch(handleError);
+    if (peer.open) setupAudio();
+    else peer.once("open", setupAudio);
+    return () => {
+      var _a;
+      (_a = localStreamRef.current) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
+      localStreamRef.current = null;
+      Object.values(callsRef.current).forEach(closeConnection);
+      callsRef.current = {};
+    };
+  }, [audio, peer]);
+  return { peerId: completePeerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
 }
 function useMessages() {
   const [messages, setMessages] = useStorage("rpc-messages", []);
@@ -204,10 +206,10 @@ function useStorage(key, initialValue, local = false) {
     return getStorage(key, initialValue, local);
   });
   const setValue = (value) => {
-    setStoredValue((old) => {
-      const updatedValue = typeof value === "function" ? value(old) : value;
-      setStorage(key, updatedValue, local);
-      return updatedValue;
+    setStoredValue((prev) => {
+      const next = isSetStateFunction(value) ? value(prev) : value;
+      setStorage(key, next, local);
+      return next;
     });
   };
   return [storedValue, setValue];

package/dist/types.d.ts

@@ -1,30 +1,43 @@
-import { PeerOptions } from 'peerjs';
+import { PeerOptions, DataConnection, MediaConnection } from 'peerjs';
 export { PeerOptions } from 'peerjs';
-import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, RefObject, SetStateAction, CSSProperties, ReactNode } from 'react';
 
+type Connection = DataConnection | MediaConnection;
+type ErrorHandler = () => void;
 type Message = {
     id: string;
     text: string;
 };
-type MessageEvent = (message: Message) => void;
+type MessageEventHandler = (message: Message) => void;
 
 type RemotePeerId = string | string[];
-type useChatProps = {
-    name?: string;
+type UseChatProps = {
     peerId: string;
+    name?: string;
     remotePeerId?: RemotePeerId;
     text?: boolean;
     recoverChat?: boolean;
     audio?: boolean;
     peerOptions?: PeerOptions;
-    onError?: Function;
-    onMicError?: Function;
-    onMessageSent?: MessageEvent;
-    onMessageReceived?: MessageEvent;
+    onError?: ErrorHandler;
+    onMicError?: ErrorHandler;
+    onMessageSent?: MessageEventHandler;
+    onMessageReceived?: MessageEventHandler;
 };
-type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-type RemotePeers = {
-    [id: string]: string;
+type UseChatReturn = {
+    peerId: string;
+    audioStreamRef: RefObject<HTMLMediaElement | null>;
+    remotePeers: RemotePeers;
+    messages: Message[];
+    sendMessage: (message: Message) => void;
+    audio: boolean;
+    setAudio: (value: SetStateAction<boolean>) => void;
+};
+type IconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type ChatProps = UseChatProps & {
+    dialogOptions?: DialogOptions;
+    props?: DivProps;
+    children?: Children;
 };
 type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 type ChildrenOptions = {
@@ -34,16 +47,14 @@ type ChildrenOptions = {
     audio?: boolean;
     setAudio?: (audio: boolean) => void;
 };
-type ChatProps = useChatProps & {
-    dialogOptions?: DialogOptions;
-    props?: DivProps;
-    children?: Children;
-};
 type DialogOptions = {
     position?: DialogPosition;
     style?: CSSProperties;
 };
 type DialogPosition = "left" | "center" | "right";
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type RemotePeers = {
+    [id: string]: string;
+};
 
-export type { ChatProps, Children, ChildrenOptions, DialogOptions, DialogPosition, DivProps, IconProps, Message, MessageEvent, RemotePeerId, RemotePeers, useChatProps };
+export type { ChatProps, Children, ChildrenOptions, Connection, DialogOptions, DialogPosition, DivProps, ErrorHandler, IconProps, Message, MessageEventHandler, RemotePeerId, RemotePeers, UseChatProps, UseChatReturn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",