npm i formik-undo


Formik Undo

Provide the ability to undo / redo modifications in a Formik form.

Uses Typescript and React hooks.


Online Demo:


npm install --save formik-undo
import { FormikUndo } from 'formik-undo';

const autoSaveOptions = {
  throttleDelay: 10000,

const App = () => {
  return (
      <FormikUndo autoSave={autoSaveOptions}>
        <MyForm />

Provider's props are as follow:

autoSaveboolean \| { ...options }trueIf false, does not autosave.
If true, autosave with the default options.
If object autosave with the provided options.
autoSave.throttleDelaynumber2000Frequency of autosaving in millisecond.
If 0, save at every modification.
autoSave.saveOnFieldChangebooleantrueIf true, save a checkpoint everytime the modified field is different from the previously modified. This is useful to save the final value of a input after the user moves to another input.
If false, only the whole formik values object is considered and different fields changes may be aggregated from one checkpoint to another.
autoSave.preventWordCuttingbooleantrueIf true, when editing a string value, don't save in the middle of a word (experimental).

If you need a finer save trigger, write your own hook using the methods provided by useFormikContext() and useFormikUndo().


import { useFormikUndo } from 'formik-undo';

const MyComponent = () => {
  const { reset, undo, redo, saveCheckpoint } = useFormikUndo();
  // Do stuff
  return (
reset() => voidReset the form to the initial values.
undo() => voidUndo to previous checkpoint.
redo() => voidRedo to next checkpoint.
saveCheckpoint() => voidManually save a checkpoint to the history.
addCheckpointEquivalent(targetValue: Values, equivalentValue: Values) => voidDeclare that a certain value is equivalent to another, and therefore does not constitute a change worth saving (advanced).
undoableCountnumberNumber of possible undo actions.
redoableCountnumberNumber of possible redo actions.
didCreateCurrentValuesbooleanWhether the latest form's values were set by us (advanced).

Control bar

A control bar with default buttons is provided (as seen on the screenshot above).

import { FormikUndoControlBar } from 'formik-undo';

const MyForm = () => {
  return (
      <FormikUndoControlBar />
      <input name="foo" />
      <input name="bar" />

<FormikUndoControlBar> accepts props:

showResetbooleantrueShow the reset button.
showRedobooleantrueShow the redo button.
disabledbooleanfalseDisable every control.
classNamestringAdd extra classes to the control container.
buttonTitlesRecord<('reset' \| 'undo' \| 'redo'), string \| null>"Reset", "Undo", "Redo"Override the title attribute of the button.
buttonClassesRecord<('reset' \| 'undo' \| 'redo'), string>{}Add extra classes to some of the buttons.
buttonIconsRecord<('reset' \| 'undo' \| 'redo'), ComponentType>"↺", "↶", "↷"Override the buttons' content.
buttonComponentComponentTypeOverride the buttons' component.

formik-undo has minimal dependencies.

If you use Material-UI, you can use a wrapper that prettifies the FormikUndoControlBar:

(Add the file into your project).

Jump To