https://github.com/oodelally/formik-undo
Provide the ability to undo / redo modifications in a Formik form.
https://github.com/oodelally/formik-undo
form formik history hooks material-ui react redo reset typescript undo
Last synced: 7 months ago
JSON representation
Provide the ability to undo / redo modifications in a Formik form.
- Host: GitHub
- URL: https://github.com/oodelally/formik-undo
- Owner: OoDeLally
- License: mit
- Created: 2020-05-07T19:34:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T17:31:59.000Z (over 2 years ago)
- Last Synced: 2025-03-14T23:51:37.222Z (7 months ago)
- Topics: form, formik, history, hooks, material-ui, react, redo, reset, typescript, undo
- Language: TypeScript
- Size: 1.19 MB
- Stars: 16
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install --save formik-undo
```
```tsx
import { FormikUndo } from 'formik-undo';
const autoSaveOptions = {
throttleDelay: 10000,
};
const App = () => {
return (
);
};
```
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
```tsx
import { useFormikUndo } from 'formik-undo';
const MyComponent = () => {
const { reset, undo, redo, saveCheckpoint } = useFormikUndo();
// Do stuff
return (
...
);
};
```
| 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).
```tsx
import { FormikUndoControlBar } from 'formik-undo';
const MyForm = () => {
return (
)
};
```
`` 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).