Maxtermax/hermes-io

A lightweight javascript library that allows communication between Reactjs components by using the observer pattern and the hook api

hermes-io

A lightweight React library that allows communication between components by using the observer pattern and the hook api.

Usage

function App({ notify }) {
  const increment = () => {
    notify({
      value: {
        type: INCREMENT,
      },
    });
  };

  const decrement = () => {
    notify({
      value: {
        type: DECREMENT,
      },
    });
  };

  return (
    <div>
      <Counter />
      <RenderTracker />
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
export default withNotify(App, {
  context: CounterContext,
  observer: CounterObserver
});

export function Counter() {
  const [count, setCount] = useState(0);
  const handleCounterNotification = (event) => {
    const { value = {} } = event;
    const { type } = value;
    if (type === INCREMENT) setCount((prevValue) => prevValue + 1);
    if (type === DECREMENT) setCount((prevValue) => prevValue - 1);
  };

  useObserver({
    contexts: [CounterContext],
    observer: CounterObserver,
    listener: handleCounterNotification,
  });

  return <h1>Counter: {count}</h1>;
}

Documentation

See: https://hermes-io-docs.vercel.app/

Devtool

Install from chrome web store here