Furō is a simple but powerful messaging layer for React applications. It can be used to tame complex asynchronous workflows and preserve sanity.

👁  Live Demo
(source in packages/example)

Installation

npm i @twopm/furo

yarn add @twopm/furo

Why furō?

There are already multiple event bus libraries for React:

• https://github.com/goto-bus-stop/react-bus
• https://github.com/arkency/event-bus
• https://github.com/fabienjuif/use-bus

However, none of these allow for strongly typed messages in TypeScript or multiple event streams. Furō also provides a debug / history tracking system loosely inspired by re-frame-flow.

Simple Example

  const Demo = () => {
    const { dispatch, useSubscribe } = useEvents()
    const [form, setForm] = useState({})
    const onSubmit = () => { dispatch({ type: 'form-submit-requested', payload: form}) }

    useSubscribe('form-submit-success', () => {
      alert('Success!')
    })

    useSubscribe('form-submit-failed', (ev) => {
      alert('Failed, see console')
      console.error('Form submission failed', ev.errors)
    })

    return (
      <div>
        {/* form goes here*/}
        <button type="submit" onClick={onSubmit}>Submit</button>
      </div>
    )
  }

  // ... elsewhere

  const Consumer = () => {
    const { useSubscribe } = useEvents()

    useSubscribe('form-submit-requested', async (ev, dispatch) => {
      const res = await fetch(
        'https://example.com/profile',
          {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(ev.payload),
        }
      ).then(r => r.json())

      if (res.ok) {
        dispatch({ type: 'form-submit-success' })
      } else {
        dispatch({ type: 'form-submit-failed', errors: res.errors })
      }
    })

    return null
  }

See the full example for more detail.

You can also view the live demo.

History Tracking

Furō features a built-in history tracker. This can be enabled and disabled via a boolean supplied to createBus().

You can visualise which events precipitated one another in a tree format, including the payload of each event. The full example has a reference usage of <HistoryDebugger />.

click::9
{}

  → inc::10
    {"amount":1}
  
  → fetch-trending::11
    {"language":"clojure"}
  
      → retrieved-trending::12
        {"repos":["tonsky/FiraCode","metabase/metabase","LightTable/LightTable", ...]}

click::13
{}

  → inc::14
    {"amount":1}

  → fetch-trending::15
    {"language":"haskell"}

      → retrieved-trending::16
        {"repos":["koalaman/shellcheck","jgm/pandoc","hasura/graphql-engine", ...]}

Setup

// TODO

For now, copy the example.

Running this repo

Bootstrap

yarn
yarn bootstrap

Running the examples

cd packages/furo
yarn build
cd ../example
yarn start