TinyBase logoTinyBase

useRedoInformation

The useRedoInformation hook returns an UndoOrRedoInformation array that indicates if and how you can move the state of the underlying Store forwards to a future checkpoint.

useRedoInformation(checkpointsOrCheckpointsId?: CheckpointsOrCheckpointsId): UndoOrRedoInformation
TypeDescription
checkpointsOrCheckpointsId?CheckpointsOrCheckpointsId

The Checkpoints object to use to go backward: omit for the default context Checkpoints object, provide an Id for a named context Checkpoints object, or provide an explicit reference.

returnsUndoOrRedoInformation

UndoOrRedoInformation about if and how you can move the state of the underlying Store forward.

This hook is useful if you are building an redo button: the information contains whether a redo action is available (to enable the button), the callback to perform the redo action, the checkpoint Id that will be redone, and its label, if available.

Example

This example uses the useUndoInformation hook to create a redo button.

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

const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
const checkpoints = createCheckpoints(store);
const App = () => {
  const [canRedo, handleRedo, _id, label] =
    useRedoInformation(checkpoints);
  return canRedo ? (
    <span onClick={handleRedo}>Redo {label}</span>
  ) : (
    <span>Nothing to redo</span>
  );
};

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

store.setCell('pets', 'nemo', 'color', 'orange');
checkpoints.addCheckpoint('color');
checkpoints.goTo('0');
console.log(app.innerHTML);
// -> '<span>Redo color</span>'

Since

v1.0.0