spacefold v0.0.1-alpha.4
spacefold
š£ Use Pub/Sub pattern inside your React applications easily!
š Table of content
š„ Ā Demo
Like always, a counter as a demo: Counter Demo
š§ Ā Why
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.
š» Ā Usage
- Small. 1.3kb minified!
- Extremely Simple. Just publishers and subscribers like old ways
Install as project dependency:
$ yarn add spacefold
Now you can start to create your publishers and subscribers
import { useState } from "react";
import { pub, sub, useSub } from "spacefold";
const inc = pub<number>();
const dec = pub<number>();
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 <div>{state}</div>;
};
const Decrement = () => (
<button onClick={() => dec.send(2)}>dec</button>
);
const Increment = () => (
<button onClick={() => inc.send(2)}>inc</button>
);
export const App = () => (
<div>
<Counter />
<Increment />
<Decrement />
</div>
);
Yes, simple as that, just a subscriber and a publisher!
šŗ Ā Contribute
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago