react-ev-bus v0.0.2

react-ev-bus

react event bus.

Table of Contents

• react-ev-bus
  • Table of Contents
  • Background
  • Usage
  • Maintainers
  • License

Background

project background

Usage

import {
  BusProvider,
  BusRootProvider,
  useBusEffect,
  useBusState,
  useDispatch,
} from 'react-ev-bus';

const CounterControl = () => {
  const inc = useDispatch('inc');
  const sub = useDispatch('sub');
  return (
    <div>
      <button onclick={inc}>+</button>
      <button onclick={sub}>-</button>
    </div>
  );
};

const CounterView = () => {
  const [count, change] = useBusState('count');
  useBusEffect('inc', () => change(count + 1));
  useBusEffect('sub', () => change(count - 1));
  return <span>{num}</span>;
};

const AnyComponent = () => {
  return (
    <div style={{boder: '1px solid tomato', padding: '1rem'}}>
      <CounterView />
      <CounterControl />
    </div>
  );
};

const App = () => {
  const [mode, changeMode] = useState('mode');
  return (
    <BusRootProvider>
      <BusProvider>
        <CounterView />
        <CounterControl />
        <AnyComponent />
      </BusProvider>
      <BusProvider>
        <CounterView />
        <CounterControl />
        <AnyComponent />
      </BusProvider>
      <AnyComponent />
    </BusRootProvider>
  );
};

Maintainers

@zhzluke96.

License

MIT © Richard Littauer