simple-react-event-hub

A simple hub that your react components can use to listen for events triggered by other components (using the hooks api)

Usage no npm install needed!

<script type="module">
  import simpleReactEventHub from 'https://cdn.skypack.dev/simple-react-event-hub';
</script>

README

Simple React Event Hub

A simple hub that your react components can use to listen for events triggered by other components (using the hooks api)

Example usage:

CounterDisplay.js

import { useState } from 'react';
import { useEvent } from 'simple-react-event-hub';

function CounterDisplay () {
  const [ counter, setCounter ] = useState( 0 );

  useEvent( 'counter_increase', () => {
    setCounter( counter + 1 );
  } );

  return (
    <span>
      Counter { counter }
    </span>
  );
}

export default CounterDisplay;

CounterButton.js

import { dispatchEvent } from "simple-react-event-hub";

function CounterButton () {
  return (
    <button onClick={ () => dispatchEvent( 'counter_increase', null ) }>
      Click me
    </button>
  );
}

export default CounterButton;