Use Pub/Sub pattern inside your React applications easily
npm install spacefoldš£ Use Pub/Sub pattern inside your React applications easily!
- Demo
- Why
- Usage
- Contribute
Like always, a counter as a demo: Counter Demo
React has a declarative API and a unidirectional data flow, this is beatiful and changes a lot the way we write our frontend application, in fact, this changes everything. But, like a lot of things, React has good and bad parts. One of the bad ones, is that sometimes just make a simple communication between modules (internal or external), became hard to do that using props or states and in a lot of cases you will need a context/provider, some state management library or - in worst cases - prop dilling.
Because of that I've beeing used a very simple implementation of an old pattern called Pub/Sub inside my application when I have this type of problem.
#### ā ļø Disclaimer
> This is not intended to replace your state management library or something else. Use this with caution or you can became your system very hard to debug.
- Small. 1.3kb minified!
- Extremely Simple. Just publishers and subscribers like old ways
Install as project dependency:
``bash`
$ yarn add spacefold
Now you can start to create your publishers and subscribers
`tsx
import { useState } from "react";
import { pub, sub, useSub } from "spacefold";
const inc = pub
const dec = pub
const counterSub = sub({
register: [inc, dec] // You need to register which events your subscriber accept
});
const Counter = () => {
const [state, setState] = useState(0);
const sub = useSub(counterSub);
sub.on(inc, (num) => {
setState(state + num);
});
sub.on(dec, (num) => {
setState(state - num);
});
return
const Decrement = () => (
);
const Increment = () => (
);
export const App = () => (
Yes, simple as that, just a subscriber and a publisher!
šŗ Contribute
1. Fork this repository to your own GitHub account and then clone it to your local device
2. Install dependencies using Yarn:
3. Make the necessary changes and ensure that the tests are passing using