TinyBase logoTinyBase

useProvideStore

The useProvideStore hook is used to add a Store object by Id to a Provider component, but imperatively from a component within it.

useProvideStore(
  storeId: string,
  store: Store,
): void
TypeDescription
storeIdstring

The Id of the Store object to be registered with the Provider.

storeStore

The Store object to be registered.

returnsvoid

This has no return value.

Normally you will register a Store by Id in a context by using the storesById prop of the top-level Provider component. This hook, however, lets you dynamically add a new Store to the context, from within a descendent component. This is useful for applications where the set of Stores is not known at the time of the first render of the root Provider.

A Store added to the Provider context in this way will be available to other components within the context (using the useStore hook and so on). If you use the same Id as an existing Store registration, the new one will take priority over one provided by the storesById prop.

Note that other components that consume a Store registered like this should defend against it being undefined at first. On the first render, the other component will likely not yet have completed the registration. In the example below, we use the null-safe useStore('petStore')? to do this.

Example

This example creates a Provider context. A child component registers a Store into it which is then consumable by a peer child component.

import {
  Provider,
  useCreateStore,
  useProvideStore,
  useStore,
} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = () => (
  <Provider>
    <RegisterStore />
    <ConsumeStore />
  </Provider>
);
const RegisterStore = () => {
  const store = useCreateStore(() =>
    createStore().setCell('pets', 'fido', 'color', 'brown'),
  );
  useProvideStore('petStore', store);
  return null;
};
const ConsumeStore = () => (
  <span>{JSON.stringify(useStore('petStore')?.getTableIds())}</span>
);

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App />);
console.log(app.innerHTML);
// -> '<span>["pets"]</span>'

Since

v4.4.2