Formik-undo NPM

Formik Undo

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

Uses Typescript and React hooks.

screenshot

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.