useProvideSynchronizer

The useProvideSynchronizer primitive is used to add a Synchronizer object by Id to a Provider component, but imperatively from a component within it.

useProvideSynchronizer(
  synchronizerId: string,
  synchronizer: Synchronizer,
): void

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

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

import {createRoot} from 'solid-js';
import {createMergeableStore} from 'tinybase';
import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
import {useProvideSynchronizer} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createMergeableStore().setCell(
    'pets',
    'fido',
    'color',
    'brown',
  );
  const synchronizer = createLocalSynchronizer(store);
  useProvideSynchronizer('petSynchronizer', synchronizer);
  console.log(synchronizer.getStatus());
  // -> 0
  synchronizer.destroy();
  dispose();
});