✨ feat: onBecomeMain callback (#10)

Author: Romainlg29

README.md

@@ -156,6 +156,12 @@ Type: `boolean` (default: `false`)
 
 If true, the store will only synchronize once with the main tab. After that, the store will be unsynchronized.
 
+##### options.onBecomeMain
+
+Type: `() => void`
+
+A callback that will be called when the tab becomes the main tab.
+
 ### useBroadcast (hooks)
 
 ```ts

example/src/stores/useCountStore.ts

@@ -20,6 +20,8 @@ export const useCountStore = create<CountStore>(
 			mode: 'Sync',
 			setMode: (mode) => set({ mode }),
 		}),
-		{ name: 'my-store' }
+		{
+			name: 'my-store',
+		}
 	)
 );

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "use-broadcast-ts",
-	"version": "1.4.5",
+	"version": "1.5.0",
 	"description": "Use the Broadcast Channel API in React easily with hooks or Zustand, and Typescript!",
 	"type": "module",
 	"types": "./dist/index.d.ts",

package.json

@@ -19,6 +19,11 @@ export type SharedOptions = {
 	 * @default false
 	 */
 	unsync?: boolean;
+
+	/**
+	 * Callback when this tab / window becomes the main tab / window
+	 */
+	onBecomeMain?: () => void;
 };
 
 /**
@@ -240,6 +245,8 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
 			if (e.data.id === id) {
 				isMain = true;
 				tabs.splice(0, tabs.length, ...e.data.tabs);
+
+				options?.onBecomeMain?.();
 			}
 		}
 	};
@@ -257,6 +264,8 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
 			if (!isSynced) {
 				isMain = true;
 				isSynced = true;
+
+				options?.onBecomeMain?.();
 			}
 		}, options?.mainTimeout ?? 100);
 	};