react-broadcast-sync 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +41 -41
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [1.1.4](https://github.com/IdanShalem/react-broadcast-sync/compare/v1.1.3...v1.1.4) (2025-06-03)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * removed icon ([3488a8d](https://github.com/IdanShalem/react-broadcast-sync/commit/3488a8d9526e5561f5ffdd14dfcce5ebb20c6838))
7
+
8
+ ## [1.1.3](https://github.com/IdanShalem/react-broadcast-sync/compare/v1.1.2...v1.1.3) (2025-06-03)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * updated readme ([621d73b](https://github.com/IdanShalem/react-broadcast-sync/commit/621d73bc93c0b5538faf158e97a06696a8ad1f0e))
14
+
1
15
  ## [1.1.2](https://github.com/IdanShalem/react-broadcast-sync/compare/v1.1.1...v1.1.2) (2025-06-03)
2
16
 
3
17
 
package/README.md CHANGED
@@ -32,13 +32,13 @@
32
32
  </a>
33
33
  </p>
34
34
 
35
+ Easily sync UI state or user events across browser tabs in React apps — notifications, presence, forms, and more. This package provides a clean and type-safe abstraction over the native API, enabling efficient, scoped, and reliable cross-tab messaging.
36
+
35
37
  <p align="center">
36
38
  <img src="https://raw.githubusercontent.com/IdanShalem/react-broadcast-sync/main/demo/react-broadcast-sync-demo/public/assets/react-broadcast-sync-demo-video.gif" alt="React Broadcast Sync Demo" width="600" />
37
39
  </p>
38
40
 
39
- Easily sync UI state or user events across browser tabs in React apps — notifications, presence, forms, and more. This package provides a clean and type-safe abstraction over the native API, enabling efficient, scoped, and reliable cross-tab messaging.
40
-
41
- ## 📚 Table of Contents
41
+ ## Table of Contents
42
42
 
43
43
  - [Features](#-features)
44
44
  - [Demo App](#-demo-app)
@@ -54,24 +54,24 @@ Easily sync UI state or user events across browser tabs in React apps — notifi
54
54
  - [Testing](#-testing)
55
55
  - [Browser Support](#-browser-support)
56
56
  - [Coming Soon](#-coming-soon)
57
- - [📦 Versioning & Releases](#-versioning--releases)
57
+ - [Versioning & Releases](#-versioning--releases)
58
58
  - [Contributing](#-contributing)
59
59
  - [License](#-license)
60
60
 
61
- ## ✨ Features
61
+ ## Features
62
62
 
63
- - 🚀 Simple and intuitive API
64
- - 🔄 Real-time synchronization across tabs
65
- - ✅ TypeScript support
66
- - 📦 Zero dependencies
67
- - 🧹 Automatic message expiration and cleanup
68
- - 🧪 Send/receive any serializable message
69
- - 🧩 Namespace and source scoping support
70
- - 🔒 Clear individual or all messages
71
- - ✅ Only accept allowed message types (optional)
72
- - 🧠 `BroadcastProvider` for context-based usage
63
+ - Simple and intuitive API
64
+ - Real-time synchronization across tabs
65
+ - TypeScript support
66
+ - Zero dependencies
67
+ - Automatic message expiration and cleanup
68
+ - Send/receive any serializable message
69
+ - Namespace and source scoping support
70
+ - Clear individual or all messages
71
+ - Only accept allowed message types (optional)
72
+ - `BroadcastProvider` for context-based usage
73
73
 
74
- ## 🎮 Demo App
74
+ ## Demo App
75
75
 
76
76
  Check out our [live demo](https://react-broadcast-sync-3w3m.vercel.app/) to see the library in action! The demo showcases three main features:
77
77
 
@@ -98,7 +98,7 @@ The demo is built with React 19, TypeScript, Material-UI, and Framer Motion. You
98
98
 
99
99
  ---
100
100
 
101
- ## 📦 Installation
101
+ ## Installation
102
102
 
103
103
  ```bash
104
104
  npm install react-broadcast-sync
@@ -110,9 +110,9 @@ pnpm add react-broadcast-sync
110
110
 
111
111
  ---
112
112
 
113
- ## 🚀 Quick Start
113
+ ## Quick Start
114
114
 
115
- ### 🔧 Basic Usage
115
+ ### Basic Usage
116
116
 
117
117
  ```tsx
118
118
  import { useBroadcastChannel } from 'react-broadcast-sync';
@@ -140,7 +140,7 @@ function MyComponent() {
140
140
 
141
141
  ---
142
142
 
143
- ### ⚙️ Advanced Usage
143
+ ### Advanced Usage
144
144
 
145
145
  ```tsx
146
146
  const {
@@ -163,7 +163,7 @@ const {
163
163
  });
164
164
  ```
165
165
 
166
- #### 💬 Sending a message with expiration:
166
+ #### Sending a message with expiration:
167
167
 
168
168
  ```tsx
169
169
  postMessage('notification', { text: 'This disappears in 5s' }, { expirationDuration: 5000 });
@@ -171,7 +171,7 @@ postMessage('notification', { text: 'This disappears in 5s' }, { expirationDurat
171
171
 
172
172
  ---
173
173
 
174
- ### 🧩 Using `BroadcastProvider`
174
+ ### Using `BroadcastProvider`
175
175
 
176
176
  You can wrap part of your app with `BroadcastProvider` and use `useBroadcastProvider()` to consume the channel context.
177
177
 
@@ -201,7 +201,7 @@ function NotificationBar() {
201
201
 
202
202
  ---
203
203
 
204
- ## 📘 API Reference
204
+ ## API Reference
205
205
 
206
206
  ### `useBroadcastChannel` Hook
207
207
 
@@ -274,7 +274,7 @@ Returns an object with:
274
274
  | `clearSentMessage()` | `function` | Remove a sent message without affecting others |
275
275
  | `error` | `string \| null` | Any runtime error from the channel |
276
276
 
277
- #### 📨 Send Options:
277
+ #### Send Options:
278
278
 
279
279
  ```ts
280
280
  interface SendMessageOptions {
@@ -283,7 +283,7 @@ interface SendMessageOptions {
283
283
  }
284
284
  ```
285
285
 
286
- #### 📩 Message Format:
286
+ #### Message Format:
287
287
 
288
288
  ```ts
289
289
  interface BroadcastMessage {
@@ -298,7 +298,7 @@ interface BroadcastMessage {
298
298
 
299
299
  ---
300
300
 
301
- ## ✅ Best Practices
301
+ ## Best Practices
302
302
 
303
303
  - **Use `namespace`** to isolate functionality between different app modules.
304
304
  - **Register allowed message types** using `registeredTypes` to avoid processing unknown or irrelevant messages.
@@ -307,7 +307,7 @@ interface BroadcastMessage {
307
307
  - **Set appropriate `deduplicationTTL`** based on your message frequency and importance.
308
308
  - **Use `cleanupDebounceMs`** when dealing with rapid message updates to prevent performance issues.
309
309
 
310
- ## 🎯 Common Use Cases
310
+ ## Common Use Cases
311
311
 
312
312
  ### Real-time Notifications
313
313
 
@@ -364,7 +364,7 @@ function TabStatus() {
364
364
  }
365
365
  ```
366
366
 
367
- ## 🔧 Performance Considerations
367
+ ## Performance Considerations
368
368
 
369
369
  ### Message Size
370
370
 
@@ -427,7 +427,7 @@ function ChatComponent() {
427
427
  - Use message expiration for temporary data
428
428
  - Consider using `keepLatestMessage: true` for status updates to prevent memory buildup
429
429
 
430
- ## 🚨 Troubleshooting
430
+ ## Troubleshooting
431
431
 
432
432
  ### Common Issues
433
433
 
@@ -464,7 +464,7 @@ This will log:
464
464
  - Cleanup operations
465
465
  - Error states
466
466
 
467
- ## 🧪 Testing
467
+ ## Testing
468
468
 
469
469
  ### Unit Testing
470
470
 
@@ -503,7 +503,7 @@ test('should render messages from provider', () => {
503
503
 
504
504
  ---
505
505
 
506
- ## 🌐 Browser Support
506
+ ## Browser Support
507
507
 
508
508
  Relies on [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel):
509
509
 
@@ -515,23 +515,23 @@ Relies on [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/AP
515
515
 
516
516
  ---
517
517
 
518
- ## 🛠️ Coming Soon
518
+ ## Coming Soon
519
519
 
520
520
  We're actively improving `react-broadcast-sync`! Here are some features and enhancements planned for upcoming versions:
521
521
 
522
- - ✅ **Unit and Integration Tests**
522
+ - **Integration Tests**
523
523
  Ensure robust behavior and edge-case coverage.
524
524
 
525
- - 🔄 **Automatic Channel Recovery**
525
+ - **Automatic Channel Recovery**
526
526
  Reconnect automatically if the `BroadcastChannel` gets disconnected or closed by the browser.
527
527
 
528
- - 🧼 **`clearMessagesByType()`**
528
+ - **`clearMessagesByType()`**
529
529
  Clear all messages of a specific type with a single call.
530
530
 
531
- - 🎯 **Per-Type Callbacks**
531
+ - **Per-Type Callbacks**
532
532
  Define message handlers for specific types with `onMessage({ type, callback })`.
533
533
 
534
- - 🧹 **`clearAllSentMessages()` / `clearAllReceivedMessages()`**
534
+ - **`clearAllSentMessages()` / `clearAllReceivedMessages()`**
535
535
  Fine-grained control for clearing messages based on source.
536
536
 
537
537
  We're committed to keeping this package lightweight, flexible, and production-ready.
@@ -539,7 +539,7 @@ Your feedback and contributions are welcome — feel free to [open an issue](htt
539
539
 
540
540
  ---
541
541
 
542
- ## 📦 Versioning & Releases
542
+ ## Versioning & Releases
543
543
 
544
544
  This project uses [Semantic Release](https://semantic-release.gitbook.io/) for fully automated versioning and changelog generation.
545
545
 
@@ -549,7 +549,7 @@ Every push to the `main` branch with a [Conventional Commit](https://www.convent
549
549
  - ✅ Changelog generation and publishing to GitHub Releases
550
550
  - ✅ Publishing to [npm](https://www.npmjs.com/package/react-broadcast-sync)
551
551
 
552
- ### 🔧 Example Commit Messages
552
+ ### Example Commit Messages
553
553
 
554
554
  ```bash
555
555
  feat: add support for per-type callbacks
@@ -558,13 +558,13 @@ chore: update dependencies
558
558
 
559
559
  ---
560
560
 
561
- ## 🤝 Contributing
561
+ ## Contributing
562
562
 
563
563
  PRs and feature suggestions welcome! Open an issue or submit a pull request.
564
564
 
565
565
  ---
566
566
 
567
- ## 🪪 License
567
+ ## License
568
568
 
569
569
  MIT © [Idan Shalem](https://github.com/IdanShalem)
570
570
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-broadcast-sync",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "description": "A lightweight React hook and provider for syncing state across browser tabs using BroadcastChannel API.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",