useSynchronizerIds

Example

This example adds two named Synchronizer objects to a Provider context and an inner component accesses their Ids.

import {
  Provider,
  useCreateMergeableStore,
  useCreateSynchronizer,
  useSynchronizerIds,
} from 'tinybase/ui-react';
import React from 'react';
import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
import {createMergeableStore} from 'tinybase';
import {createRoot} from 'react-dom/client';

const App = () => {
  const store1 = useCreateMergeableStore(createMergeableStore);
  const synchronizer1 = useCreateSynchronizer(
    store1,
    createLocalSynchronizer,
  );
  const store2 = useCreateMergeableStore(createMergeableStore);
  const synchronizer2 = useCreateSynchronizer(
    store2,
    createLocalSynchronizer,
  );
  return (
    <Provider synchronizersById={{synchronizer1, synchronizer2}}>
      <Pane />
    </Provider>
  );
};
const Pane = () => <span>{JSON.stringify(useSynchronizerIds())}</span>;

const app = document.createElement('div');
createRoot(app).render(<App />);

// ...
console.log(app.innerHTML);
// -> '<span>["synchronizer1","synchronizer2"]</span>'

Since

v5.3.0