Wondering what’s next for npm?Check out our public roadmap! »

    @raid/hooks

    6.1.0 • Public • Published

    @raid/hooks

    React hooks that link in to raid signals and streams

    npm License: MIT Build Status Coverage Status js-standard-style

    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

    Install

    npm i @raid/hooks

    DownloadsWeekly Downloads

    18

    Version

    6.1.0

    License

    MIT

    Unpacked Size

    38.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar