https://github.com/danielberigoi/react-topics
React simple notification service
https://github.com/danielberigoi/react-topics
notification notify pubsub react subscribe topics
Last synced: 1 day ago
JSON representation
React simple notification service
- Host: GitHub
- URL: https://github.com/danielberigoi/react-topics
- Owner: danielberigoi
- Created: 2020-03-22T14:31:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-07-17T23:37:56.000Z (12 months ago)
- Last Synced: 2025-08-09T14:50:57.102Z (11 months ago)
- Topics: notification, notify, pubsub, react, subscribe, topics
- Language: JavaScript
- Homepage:
- Size: 744 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React simple pub-sub service
## Summary
Provides the ability to subscribe React components to defined topics.
### Getting started
```bash
npm install react-topics
```
### App.js
Wrap the main application with the `TopicsProvider` component.
```javascript
import Header from "./components/Header";
import Content from "./components/Content";
import { TopicsProvider } from "react-topics";
const App = () => {
return (
);
};
```
### Header.js - Subscriber example
To consume the topic data, wrap the component with the `withTopics` HOC.
- A component can subscribe to one or multiple topics.
- The topic data can be found under `props.topics.data`
- The topic data is structured per topic. For instance, if the component is subscribed to the `system` topic, the data will be found under `props.topics.data.system`
```javascript
import { withTopics } from "react-topics";
const Header = props => {
const { data } = props.topics;
return (
User: {data.user.name || "No user"}
System loaded: {(data.system.loaded && "true") || "false"}
);
};
// Specify the topics you want this component to listen to
export default withTopics(Header, { topics: ["system", "user"] });
```
### Content.js - Publisher example
To publish an update, wrap the component with the `withTopics` HOC.
- When you `publish` on a specific topic, all components that are subscribed will be updated.
- The payload sent with each notification is automatically merged, there is no need to extend any previous data.
```javascript
import { withTopics } from "react-topics";
const Content = props => {
const { publish } = props.topics;
return (
publish("system", { loaded: true })}>
Notify that the system is loaded
publish("user", { name: "John" })}>
Notify user update
);
};
export default withTopics(Content);
```
## Examples
- [Simple Example](https://github.com/danielberigoi/react-topics/tree/master/examples/simple)
## Disclaimer
This is an abstraction over the React `context` API. This is not a replacement for any state-management libraries like `redux`.
The purpose here is to simplify the boilerplate work as much as possible.
## Technical Info
- The components are automatically subscribed to the passed-in topics on first render.
- The components are automatically unsubscribed on component un-mount.
- The components are memoized using React's `memo`.