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).