use-broadcast-ts - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.js

@@ -6,14 +6,19 @@ 'use strict';
 /**
- * Our hook will return an object with two properties:
+ * Our hook will return an object with three properties:
  * - send: a function that will send a message to all other tabs
  * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
  */
 
 /**
+ * The options for the useBroadcast hook
+ */
+
+/**
  *
  * @param name The name of the broadcast channel
  * @param val The initial value of the broadcast
- * @returns Returns an object with two properties: send and state
+ * @returns Returns an object with three properties: send, state and subscribe
  */
-const useBroadcast = (name, val) => {
+const useBroadcast = (name, val, options) => {
   /**
@@ -38,4 +43,26 @@ * Store the state of the broadcast
     channel.current.postMessage(val);
-    setState(val);
+    if (!(options != null && options.subscribe)) {
+      setState(val);
+    }
+
+    /**
+     * Dispatch an event to the current tab
+     */
+    document.dispatchEvent(new CustomEvent(`${name}-broadcast`, {
+      detail: val
+    }));
   };
+
+  /**
+   * This function subscribe to the broadcast
+   * @param callback The callback function
+   * @returns Returns a function that unsubscribe the callback
+   */
+  const subscribe = callback => {
+    document.addEventListener(`${name}-broadcast`, e => {
+      callback(e.detail);
+      console.log('event received');
+    });
+    return () => document.removeEventListener(`${name}-broadcast`, e => callback(e.detail));
+  };
   react.useEffect(() => {
@@ -45,6 +72,10 @@ /**
      */
-    if (typeof window === "undefined" || !window.BroadcastChannel) {
-      console.error("BroadcastChannel is not supported!");
+    if (typeof window === 'undefined') {
+      console.error('Window is undefined!');
       return;
     }
+    if (!window.BroadcastChannel) {
+      console.error('BroadcastChannel is not supported!');
+      return;
+    }
 
@@ -66,3 +97,12 @@ /**
        */
-      setState(e.data);
+      if (!(options != null && options.subscribe)) {
+        setState(e.data);
+      }
+
+      /**
+       * Dispatch an event to all the other tabs
+       */
+      document.dispatchEvent(new CustomEvent(`${name}-broadcast`, {
+        detail: e.data
+      }));
     };
@@ -80,6 +120,7 @@
     };
-  }, [name]);
+  }, [name, options]);
   return {
     send,
-    state
+    state,
+    subscribe
   };
@@ -86,0 +127,0 @@ };

dist/useBroadcast.d.ts

 /**
- * Our hook will return an object with two properties:
+ * Our hook will return an object with three properties:
  * - send: a function that will send a message to all other tabs
  * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
  */
@@ -9,9 +10,16 @@ export type UseBroadcastReturn<T> = {
     state: T | undefined;
+    subscribe: (callback: (e: T) => void) => () => void;
 };
 /**
+ * The options for the useBroadcast hook
+ */
+export type UseBroadcastOptions = {
+    subscribe?: boolean;
+};
+/**
  *
  * @param name The name of the broadcast channel
  * @param val The initial value of the broadcast
- * @returns Returns an object with two properties: send and state
+ * @returns Returns an object with three properties: send, state and subscribe
  */
-export declare const useBroadcast: <T>(name: string, val?: T | undefined) => UseBroadcastReturn<T>;
+export declare const useBroadcast: <T>(name: string, val?: T | undefined, options?: UseBroadcastOptions) => UseBroadcastReturn<T>;

package.json

 {
 	"name": "use-broadcast-ts",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Use the Broadcast Channel API in React easily with hooks and Typescript!",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -25,3 +25,3 @@ # use-wasm-ts
         send,
-    } = useBroadcast<{ value: number }>('my-channel', {value: 0})
+    } = useBroadcast<{ value: number }>('my-channel', { value: 0 })
 
@@ -39,3 +39,32 @@ return (
 
+With the example above, the component will re-render when the channel receive or send a value.
 
+```jsx
+import { FC, useEffect } from 'react';
+import { useBroadcast } from 'use-broadcast-ts';
+
+const MyComponent: FC = () => {
+    const {
+        send,
+        subscribe,
+    } = useBroadcast<{ value: number }>('my-channel', { value: 0 }, { subscribe: true })
+
+    useEffect(() => {
+        const unsub = subscribe(({value}) => console.log(`My new value is: ${value}`));
+
+        return () => unsub();
+    }, []);
+
+    return (
+        <>
+            <button onClick={() => send({value: 10})}/>
+        </>
+    );
+};
+
+export default MyComponent;
+```
+
+With the example above, the component will not re-render when the channel receive or send a value but will call the `subscribe` callback.
+
 ## API
@@ -46,5 +75,6 @@
 ```ts
-useWasm<T>(name: string, value?: T): {
+useWasm<T>(name: string, value?: T, options?: UseBroadcastOptions): {
     state: T;
     send: (value: T) => void;
+    subscribe: (callback: (e: T) => void) => () => void;
 };
@@ -67,2 +97,15 @@ ```
 
+##### options
+
+Type: `UseBroadcastOptions` (default: `{}`)
+
+The options of the hook.
+
+##### options.subscribe
+
+Type: `boolean | undefined` (default: `undefined`)
+
+If true, the hook will not re-render the component when the channel receive a new value but will call the `subscribe` callback.
+
+
 #### Return
@@ -82,2 +125,8 @@
 
+##### subscribe
+
+Type: `(callback: (e: T) => void) => () => void`
+
+Subscribe to the channel. The callback will be called when the channel receive a new value and when the options.subscribe is set to true.
+
 ## What data can I send?
@@ -84,0 +133,0 @@

src/useBroadcast.ts

@@ -1,88 +0,127 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
 
 /**
- * Our hook will return an object with two properties:
+ * Our hook will return an object with three properties:
  * - send: a function that will send a message to all other tabs
  * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
  */
 export type UseBroadcastReturn<T> = {
-  send: (val: T) => void;
-  state: T | undefined;
+	send: (val: T) => void;
+	state: T | undefined;
+	subscribe: (callback: (e: T) => void) => () => void;
 };
 
 /**
+ * The options for the useBroadcast hook
+ */
+export type UseBroadcastOptions = {
+	subscribe?: boolean;
+};
+
+/**
  *
  * @param name The name of the broadcast channel
  * @param val The initial value of the broadcast
- * @returns Returns an object with two properties: send and state
+ * @returns Returns an object with three properties: send, state and subscribe
  */
-export const useBroadcast = <T>(
-  name: string,
-  val?: T
-): UseBroadcastReturn<T> => {
-  /**
-   * Store the state of the broadcast
-   */
-  const [state, setState] = useState<T | undefined>(val);
+export const useBroadcast = <T>(name: string, val?: T, options?: UseBroadcastOptions): UseBroadcastReturn<T> => {
+	/**
+	 * Store the state of the broadcast
+	 */
+	const [state, setState] = useState<T | undefined>(val);
 
-  /**
-   * Store the BroadcastChannel instance
-   */
-  const channel = useRef<BroadcastChannel | null>(null);
+	/**
+	 * Store the BroadcastChannel instance
+	 */
+	const channel = useRef<BroadcastChannel | null>(null);
 
-  /**
-   * This function send the value to all the other tabs
-   * @param val The value to send
-   */
-  const send = (val: T) => {
-    if (!channel.current) {
-      return;
-    }
+	/**
+	 * This function send the value to all the other tabs
+	 * @param val The value to send
+	 */
+	const send = (val: T) => {
+		if (!channel.current) {
+			return;
+		}
 
-    channel.current.postMessage(val);
+		channel.current.postMessage(val);
 
-    setState(val);
-  };
+		if (!options?.subscribe) {
+			setState(val);
+		}
 
-  useEffect(() => {
-    /**
-     * If BroadcastChannel is not supported, we log an error and return
-     */
-    if (typeof window === "undefined" || !window.BroadcastChannel) {
-      console.error("BroadcastChannel is not supported!");
-      return;
-    }
+		/**
+		 * Dispatch an event to the current tab
+		 */
+		document.dispatchEvent(new CustomEvent<T>(`${name}-broadcast`, { detail: val }));
+	};
 
-    /**
-     * If the channel is null, we create a new one
-     */
-    if (!channel.current) {
-      channel.current = new BroadcastChannel(name);
-    }
+	/**
+	 * This function subscribe to the broadcast
+	 * @param callback The callback function
+	 * @returns Returns a function that unsubscribe the callback
+	 */
+	const subscribe = (callback: (e: T) => void) => {
+		document.addEventListener(`${name}-broadcast`, (e) => {
+			callback((e as CustomEvent<T>).detail);
+			console.log('event received');
+		});
 
-    /**
-     * Subscribe to the message event
-     * @param e The message event
-     */
-    channel.current.onmessage = (e) => {
-      /**
-       * Update the state
-       */
-      setState(e.data);
-    };
+		return () => document.removeEventListener(`${name}-broadcast`, (e) => callback((e as CustomEvent<T>).detail));
+	};
 
-    /**
-     * Cleanup
-     */
-    return () => {
-      if (!channel.current) {
-        return;
-      }
+	useEffect(() => {
+		/**
+		 * If BroadcastChannel is not supported, we log an error and return
+		 */
+		if (typeof window === 'undefined') {
+			console.error('Window is undefined!');
+			return;
+		}
 
-      channel.current.close();
-      channel.current = null;
-    };
-  }, [name]);
+		if (!window.BroadcastChannel) {
+			console.error('BroadcastChannel is not supported!');
+			return;
+		}
 
-  return { send, state };
+		/**
+		 * If the channel is null, we create a new one
+		 */
+		if (!channel.current) {
+			channel.current = new BroadcastChannel(name);
+		}
+
+		/**
+		 * Subscribe to the message event
+		 * @param e The message event
+		 */
+		channel.current.onmessage = (e) => {
+			/**
+			 * Update the state
+			 */
+			if (!options?.subscribe) {
+				setState(e.data);
+			}
+
+			/**
+			 * Dispatch an event to all the other tabs
+			 */
+			document.dispatchEvent(new CustomEvent<T>(`${name}-broadcast`, { detail: e.data }));
+		};
+
+		/**
+		 * Cleanup
+		 */
+		return () => {
+			if (!channel.current) {
+				return;
+			}
+
+			channel.current.close();
+			channel.current = null;
+		};
+	}, [name, options]);
+
+	return { send, state, subscribe };
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19039

increased by37.57%

Lines of code

438

increased by35.6%

Number of lines in readme file

149

increased by49%

No dependency changes