`usePersisterStatus`

The usePersisterStatus hook returns a the status of a Persister, and registers a listener so that any changes to it will cause a re-render.

usePersisterStatus(persisterOrPersisterId?: PersisterOrPersisterId): Status

Type Description

	Type	Description
`persisterOrPersisterId?`	`PersisterOrPersisterId`	The `Persister` to be accessed: omit for the default context `Persister`, provide an `Id` for a named context `Persister`, or provide an explicit reference.
returns	`Status`	The status of the `Persister`: 0 means idle, 1 means loading, and 2 means saving.

persisterOrPersisterId?

PersisterOrPersisterId

The Persister to be accessed: omit for the default context Persister, provide an Id for a named context Persister, or provide an explicit reference.

returns

Status

The status of the Persister: 0 means idle, 1 means loading, and 2 means saving.

A Provider component is used to wrap part of an application in a context, and it can contain a default Persister or a set of Persister objects named by Id. The usePersisterStatus hook lets you indicate which Persister to get data for: omit the optional parameter for the default context Persister, provide an Id for a named context Persister, or provide a Persister explicitly by reference.

When first rendered, this hook will create a listener so that changes to the Persister status will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.

Examples

This example creates a Persister outside the application, which is used in the usePersisterStatus hook by reference. A change to the status of the Persister re-renders the component.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createSessionPersister} from 'tinybase/persisters/persister-browser';
import {createStore} from 'tinybase';
import {usePersisterStatus} from 'tinybase/ui-react';

const persister = createSessionPersister(createStore(), 'pets');
const App = () => <span>{usePersisterStatus(persister)}</span>;

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

This example creates a Provider context into which a default Persister is provided. A component within it then uses the usePersisterStatus hook.

import {Provider, usePersisterStatus} 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 = ({persister}) => (
  <Provider persister={persister}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{usePersisterStatus()}</span>;

const persister = createSessionPersister(createStore(), 'pets');
const app = document.createElement('div');
createRoot(app).render(<App persister={persister} />);
console.log(app.innerHTML);
// -> '<span>0</span>'

This example creates a Provider context into which a Persister is provided, named by Id. A component within it then uses the usePersisterStatus hook.

import {Provider, usePersisterStatus} 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 = ({persister}) => (
  <Provider persistersById={{petPersister: persister}}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{usePersisterStatus('petPersister')}</span>;

const persister = createSessionPersister(createStore(), 'pets');
const app = document.createElement('div');
createRoot(app).render(<App persister={persister} />);
console.log(app.innerHTML);
// -> '<span>0</span>'

Since

v5.3.0