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.
- package/CHANGELOG.md +14 -0
- package/README.md +41 -41
- 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
|
-
|
|
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
|
-
- [
|
|
57
|
+
- [Versioning & Releases](#-versioning--releases)
|
|
58
58
|
- [Contributing](#-contributing)
|
|
59
59
|
- [License](#-license)
|
|
60
60
|
|
|
61
|
-
##
|
|
61
|
+
## Features
|
|
62
62
|
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
66
|
-
-
|
|
67
|
-
-
|
|
68
|
-
-
|
|
69
|
-
-
|
|
70
|
-
-
|
|
71
|
-
-
|
|
72
|
-
-
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
113
|
+
## Quick Start
|
|
114
114
|
|
|
115
|
-
###
|
|
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
|
-
###
|
|
143
|
+
### Advanced Usage
|
|
144
144
|
|
|
145
145
|
```tsx
|
|
146
146
|
const {
|
|
@@ -163,7 +163,7 @@ const {
|
|
|
163
163
|
});
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
####
|
|
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
|
-
###
|
|
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
|
-
##
|
|
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
|
-
####
|
|
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
|
-
####
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
##
|
|
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
|
-
-
|
|
522
|
+
- **Integration Tests**
|
|
523
523
|
Ensure robust behavior and edge-case coverage.
|
|
524
524
|
|
|
525
|
-
-
|
|
525
|
+
- **Automatic Channel Recovery**
|
|
526
526
|
Reconnect automatically if the `BroadcastChannel` gets disconnected or closed by the browser.
|
|
527
527
|
|
|
528
|
-
-
|
|
528
|
+
- **`clearMessagesByType()`**
|
|
529
529
|
Clear all messages of a specific type with a single call.
|
|
530
530
|
|
|
531
|
-
-
|
|
531
|
+
- **Per-Type Callbacks**
|
|
532
532
|
Define message handlers for specific types with `onMessage({ type, callback })`.
|
|
533
533
|
|
|
534
|
-
-
|
|
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
|
-
##
|
|
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
|
-
###
|
|
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
|
-
##
|
|
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
|
-
##
|
|
567
|
+
## License
|
|
568
568
|
|
|
569
569
|
MIT © [Idan Shalem](https://github.com/IdanShalem)
|
|
570
570
|
```
|
package/package.json
CHANGED