`CheckpointView`

The CheckpointView component simply renders the label of a checkpoint.

CheckpointView(props: CheckpointProps): ComponentReturnType

Type Description

	Type	Description
`props`	`CheckpointProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the checkpoint: its label if present, or `Id`.

props

CheckpointProps

The props for this component.

returns

ComponentReturnType

A rendering of the checkpoint: its label if present, or Id.

The component's props identify which checkpoint to render based on Checkpoint Id and Checkpoints object (which is either the default context Checkpoints object, a named context Checkpoints object, or an explicit reference).

The primary purpose of this component is to render multiple checkpoints in a BackwardCheckpointsView component or ForwardCheckpointsView component.

This component uses the useCheckpoint hook under the covers, which means that any changes to the local Row Ids in the Relationship will cause a re-render.

Example

This example creates a Checkpoints object outside the application, which is used in the CheckpointView component by reference to render a checkpoint with a label (with its Id for readability).

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createCheckpoints, createStore} from 'tinybase';
import {CheckpointView} from 'tinybase/ui-react';

const store = createStore().setTable('pets', {fido: {species: 'dog'}});
const checkpoints = createCheckpoints(store);
const App = () => (
  <div>
    <CheckpointView
      checkpointId="1"
      checkpoints={checkpoints}
      debugIds={true}
    />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div>1:{}</div>'

store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');
console.log(app.innerHTML);
// -> '<div>1:{sale}</div>'

checkpoints.setCheckpoint('1', 'sold');
console.log(app.innerHTML);
// -> '<div>1:{sold}</div>'

Since

v1.0.0