@raid/hooks

React hooks that link in to raid signals and streams

Raid Documentation

Getting Started

Install with yarn or npm

yarn add raid @raid/hooks

npm i -S raid @raid/hooks

Raid helps to manage state throughout your application and these hooks help you to manage the signals and streams that raid exposes to allow your application to react to changes over time to that state.

Hooks

useSignal (supplied signal)

<Function {Raid.Signal, options:Object}> => { state:Object, emit: Function }

useSignal can attach to a signal and returns the state passing through the signal as well as an emit function to send messages to the signal.

const Posts = () => {
  const { state, emit } = useSignal(signal)

  return (
    <>
      {state.posts.map(post => <Post {...post} />)}
      <SubmitPost onSubmit={text => emit({ type: 'createPost', payload: text })}
    </>
  )
}

The useSignal hook also accepts an options argument:

options {
  selector: Function(state: Object)
}

A selector function can be used to transform the state coming out of the signal and supplying it in the return from the hook:

const Posts = () => {
  const { posts, emit } = useSignal(signal, {
    selector: state => filter(post => post.isSubmitted)(state.posts)
  })

  return (
    <>
      {posts.map(post => <Post {...post} />)}
      <SubmitPost onSubmit={text => emit({ type: 'createPost', payload: text })}
    </>
  )
}

The ‘supplied’ form of useSignal is where a signal is supplied as the first parameter. However, this parameter is optional and, if omitted, the hook will attempt to find a signal in context.

useSignal (context)

If the signal parameter is omitted then useSignal will attempt to find a signal from the context. You can place a signal into the context by using a SignalProvider:

const App = () => {
  return (
    <SignalProvider signal={signal}>
      <Posts />
    </Signal>
  )
}

The Provider form works in the same way as manually supplying a signal to the useSignal hook and outputs the state (after any transform by a selector function) and an emit function to send messages to the signal.

Running tests

$ yarn
$ yarn test

Contributing

Pull requests are always welcome, the project uses the standard code style. Please run yarn test to ensure all tests are passing and add tests for any new features or updates.

For bugs and feature requests, please create an issue.

See the root readme for more information about how the repository is structured.

License

MIT