broker-hook v0.0.9

Broker Hook

Check out broker - your Real-time Zero-Code API Server - https://crates.io/crates/broker

API

SSEProvider

The provider manage the subscritpion to the SSE server. You can subscribe multiple times to the same event or on different events. The source is created only once when one of the hook is called inside the tree. The source is destroyed when no more hooks are registered.

Options

Usage

import React from 'react';
import { SSEProvider } from 'broker-hook';

const App = () => (
  <SSEProvider
    endpoint="https://sse.example.com"
    options={{
      headers: {
        authorization: 'Bearer 123'
      }
    }}
  >
    {/* ... */}
  </SSEProvider>
);

useSSE

The component that uses the hook must be scoped under a SSEProvider to have access to the source. Once the hook is created none of the options can be updated (at the moment). You have to unmout / remount the component to update the options.

Usage

import React from 'react';
import { useSSE } from 'react-hooks-sse';

const Comments = () => {
  const state = useSSE('comments', {
    initialState: {
      data: {
        value: null,
      },
    },
    stateReducer(state, changes) {
      // changes.event - event provided by the source
      // changes.data - data provided by the parser

      return changes;
    },
    parser(input) {
      return JSON.parse(input);
    },
  });

  return <p>{state.data.value !== null && <span>{state.data.value}</span>}</p>;
};