for
formik-undo
npm i formik-undo
for

formik-undo

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

by Pascal Heitz

1.5.2 (see all)License:MITTypeScript:Built-In
npm i formik-undo
Readme

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:

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

Usage

import { useFormikUndo } from 'formik-undo';

const MyComponent = () => {
  const { reset, undo, redo, saveCheckpoint } = useFormikUndo();
  // Do stuff
  return (
    <div>
      ...
    </div>
  );
};
NameTypeDescription
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 (
    <Form>
      <FormikUndoControlBar />
      <input name="foo" />
      <input name="bar" />
    </Form>
  )
};

<FormikUndoControlBar> accepts props:

NameTypeDefaultDescription
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:

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

(Add the file into your project).

Downloads/wk

25

GitHub Stars

10

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

3
VersionTagPublished
1.5.2
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate