Scoutbar with Broadstate

Customize the scoutbar experience

Setting Up

Try on codesandbox

Some usage terms you need to be familiar with – createObservable, useBroadState

createObservable, takes in the central state you need to be observed, useBroadState, hooks that handle reading state and dispatching actions Here is a simple example

Create the Observable

observable.js

import { createObservable } from 'broad-state';
import { createScoutAction } from 'scoutbar';

export const actions = createObservable([
  createScoutAction({
    title: 'Get Started',
    href: '/',
  }),
]);
// Other Observable value goes here

Call observable in the App

App.js

import React, { useEffect } from 'react';
import { useBroadState } from 'broad-state';
import { createScoutAction } from 'scoutbar';
import { actions } from './observable';

export default function App() {
  const [state, setState] = useBroadState(actions);

  useEffect(() => {
    // .....some API Manipulations
    setState([
      ...state,
      createScoutAction({
        label: 'Context Added Action',
        description: 'Context Added Action with scoutbar',
        href: '/',
      }),
    ]);
  }, []);

  return (
    <div className="App">
      <h2>Broad State Demo</h2>
      <ScoutBar actions={state} />
    </div>
  );
}