Formik Undo

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

Uses Typescript and React hooks.

Online Demo: https://codesandbox.io/s/github/OoDeLally/formik-undo-demo

Setup

npm install --save formik-undo

import { FormikUndo } from 'formik-undo';

const autoSaveOptions = {
  throttleDelay: 10000,
};

const App = () => {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
    >
      <FormikUndo autoSave={autoSaveOptions}>
        <MyForm />
      </FormikUndo>
    </Formik>
  );
};

Provider's props are as follow:

Name	Type	Default	Description
autoSave	boolean | { ...options }	true	If false, does not autosave. If true, autosave with the default options. If object autosave with the provided options.
autoSave.throttleDelay	number	2000	Frequency of autosaving in millisecond. If 0, save at every modification.
autoSave.saveOnFieldChange	boolean	true	If 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.preventWordCutting	boolean	true	If 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().

Usage

import { useFormikUndo } from 'formik-undo';

const MyComponent = () => {
  const { reset, undo, redo, saveCheckpoint } = useFormikUndo();
  // Do stuff
  return (
    <div>
      ...
    </div>
  );
};

Name	Type	Description
reset	() => void	Reset the form to the initial values.
undo	() => void	Undo to previous checkpoint.
redo	() => void	Redo to next checkpoint.
saveCheckpoint	() => void	Manually save a checkpoint to the history.
addCheckpointEquivalent	(targetValue: Values, equivalentValue: Values) => void	Declare that a certain value is equivalent to another, and therefore does not constitute a change worth saving (advanced).
undoableCount	number	Number of possible undo actions.
redoableCount	number	Number of possible redo actions.
didCreateCurrentValues	boolean	Whether 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 (
    <Form>
      <FormikUndoControlBar />
      <input name="foo" />
      <input name="bar" />
    </Form>
  )
};

<FormikUndoControlBar> accepts props:

Name	Type	Default	Description
showReset	boolean	true	Show the reset button.
showRedo	boolean	true	Show the redo button.
disabled	boolean	false	Disable every control.
className	string		Add extra classes to the control container.
buttonTitles	Record<('reset' | 'undo' | 'redo'), string | null>	"Reset", "Undo", "Redo"	Override the title attribute of the button.
buttonClasses	Record<('reset' | 'undo' | 'redo'), string>	{}	Add extra classes to some of the buttons.
buttonIcons	Record<('reset' | 'undo' | 'redo'), ComponentType>	"↺", "↶", "↷"	Override the buttons' content.
buttonComponent	ComponentType		Override the buttons' component.

formik-undo has minimal dependencies.

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

https://github.com/OoDeLally/formik-undo/blob/master/extras/MaterialUiFormikUndoControlBar.tsx

(Add the file into your project).