https://github.com/lemoncode/publisher-subscriber-provider
https://github.com/lemoncode/publisher-subscriber-provider
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lemoncode/publisher-subscriber-provider
- Owner: Lemoncode
- License: mit
- Created: 2021-02-20T06:53:57.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-23T12:18:21.000Z (over 5 years ago)
- Last Synced: 2025-05-08T01:44:04.160Z (about 1 year ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# publisher-subscriber-provider
This package is an implementation of the publisher-subscriber pattern, using react hooks and context. It provides the necessary tools to publish events and subscribe to them. Control that no re-renders are performed on components that are not affected by published events.
## Features
- Publish-subscriber pattern.
- Persistence of subscriptions in context.
- Do not re-render on components not affected by the publication of an event.
- Ability to automatically unsubscribe via useSubscribe hook.
- Javascript & Typescript.
## Usage
You can check the examples folder.
### Add the provider
First, you need to add the Publisher Subscriber Provider by wrapping your components that need to publish / subscribe to events:
```javascript
import React from "react";
import { PublisherSubscriberProvider } from "publisher-subscriber-provider";
import { Content } from "./components/content.component";
import { Header } from "./components/header.component";
import { Other } from "./components/other.component";
export const App = () => {
return (
);
};
```
Now you can publish events from any child component:
```javascript
import React from "react";
import { usePublisherSubscriber } from "publisher-subscriber-provider";
export const Header = () => {
const [value, setValue] = React.useState("");
const { publish } = usePublisherSubscriber();
React.useEffect(() => {
publish("onChangeText", value);
}, [value]);
return (
Header
setValue(e.target.value)} />
);
};
```
And subscribe/unsubscribe to those events from other components:
```javascript
export const Content = () => {
const [text, setText] = React.useState("");
const { subscribe } = usePublisherSubscriber();
React.useEffect(() => {
const unsubscribe = subscribe("onChangeText", setText);
// Return cleanup function
return () => unsubscribe();
}, []);
return (
Content
The value has changed: {text}
);
};
```
You can auto-unsubscribe events using useSubscribe hook:
```javascript
export const ContentAutoUnsubscribe = () => {
const [text, setText] = React.useState("");
const { useSubscribe } = usePublisherSubscriber();
useSubscribe("onChangeText", setText);
return (
Content
The value has changed: {text}
);
};
```
## Installing
Using npm:
```bash
$ npm install publisher-subscriber-provider
```
Using yarn:
```bash
$ yarn install publisher-subscriber-provider
```
## Peer dependencies
**publisher-subscriber-provider** needs the following peer dependencies:
```
"react": ">=16.8.6",
"react-dom": ">=16.8.6"
```
## Typescript
**publisher-subscriber-provider** includes TypeScript definitions.
## Example
You can check the examples folder.
## Credits
[Link to author github](https://github.com/v-borrego)