🗣 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.

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:

$ 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!

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Install dependencies using Yarn: yarn install
3. Make the necessary changes and ensure that the tests are passing using yarn test
4. Send a pull request 🙌