TinyBase

useCheckpoints

The useCheckpoints hook is used to get a reference to a Checkpoints object from within a Provider component context.

useCheckpoints(id?: string): Checkpoints | undefined
TypeDescription
id?string

An optional Id for accessing a Checkpoints object that was named with an Id in the Provider.

returnsCheckpoints | undefined

A reference to the Checkpoints object (or `undefined` if not within a Provider context, or if the requested Checkpoints object does not exist)

A Provider component is used to wrap part of an application in a context. It can contain a default Checkpoints object (or a set of Checkpoints objects named by Id) that can be easily accessed without having to be passed down as props through every component.

The useCheckpoints hook lets you either get a reference to the default Checkpoints object (when called without an parameter), or one of the Checkpoints objects that are named by Id (when called with an Id parameter).

Examples

This example creates a Provider context into which a default Checkpoint object is provided. A component within it then uses the useCheckpoints hook to get a reference to the Checkpoints object again, without the need to have it passed as a prop.

const App = ({checkpoints}) => (
  <Provider checkpoints={checkpoints}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>{useCheckpoints().getListenerStats().checkpointIds}</span>
);

const checkpoints = createCheckpoints(createStore());
const app = document.createElement('div');
ReactDOM.render(<App checkpoints={checkpoints} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'

This example creates a Provider context into which a Checkpoints object is provided, named by Id. A component within it then uses the useCheckpoints hook with that Id to get a reference to the Checkpoints object again, without the need to have it passed as a prop.

const App = ({checkpoints}) => (
  <Provider checkpointsById={{petStore: checkpoints}}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>
    {useCheckpoints('petStore').getListenerStats().checkpointIds}
  </span>
);

const checkpoints = createCheckpoints(createStore());
const app = document.createElement('div');
ReactDOM.render(<App checkpoints={checkpoints} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'