usePersisterIds

Example

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

import {
  Provider,
  useCreatePersister,
  useCreateStore,
  usePersisterIds,
} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createSessionPersister} from 'tinybase/persisters/persister-browser';
import {createStore} from 'tinybase';

const App = () => {
  const store1 = useCreateStore(createStore);
  const persister1 = useCreatePersister(store1, (store1) =>
    createSessionPersister(store1, 'pets1'),
  );
  const store2 = useCreateStore(createStore);
  const persister2 = useCreatePersister(store2, (store2) =>
    createSessionPersister(store2, 'pets2'),
  );
  return (
    <Provider persistersById={{persister1, persister2}}>
      <Pane />
    </Provider>
  );
};
const Pane = () => <span>{JSON.stringify(usePersisterIds())}</span>;

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

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

Since

v5.3.0