{"id":16975091,"url":"https://github.com/oodelally/formik-undo","last_synced_at":"2025-03-22T14:31:38.093Z","repository":{"id":42843683,"uuid":"262141570","full_name":"OoDeLally/formik-undo","owner":"OoDeLally","description":"Provide the ability to undo / redo modifications in a Formik form.","archived":false,"fork":false,"pushed_at":"2023-03-04T17:31:59.000Z","size":1251,"stargazers_count":16,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T23:51:37.222Z","etag":null,"topics":["form","formik","history","hooks","material-ui","react","redo","reset","typescript","undo"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OoDeLally.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-07T19:34:25.000Z","updated_at":"2025-01-07T09:19:27.000Z","dependencies_parsed_at":"2024-10-28T13:22:28.600Z","dependency_job_id":"8d43b220-9b46-4005-87d8-de093629afb4","html_url":"https://github.com/OoDeLally/formik-undo","commit_stats":{"total_commits":83,"total_committers":3,"mean_commits":"27.666666666666668","dds":"0.14457831325301207","last_synced_commit":"a9d3317d0b74c9eadabf1c2b5c673803591098a3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OoDeLally%2Fformik-undo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OoDeLally%2Fformik-undo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OoDeLally%2Fformik-undo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OoDeLally%2Fformik-undo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OoDeLally","download_url":"https://codeload.github.com/OoDeLally/formik-undo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244972091,"owners_count":20540918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","formik","history","hooks","material-ui","react","redo","reset","typescript","undo"],"created_at":"2024-10-14T01:09:14.633Z","updated_at":"2025-03-22T14:31:38.087Z","avatar_url":"https://github.com/OoDeLally.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Formik Undo\n\nProvide the ability to undo / redo modifications in a Formik form.\n\nUses Typescript and React hooks.\n\n\n![screenshot](https://github.com/OoDeLally/formik-undo/blob/master/extras/formik-undo.gif)\n\n\nOnline Demo: https://codesandbox.io/s/github/OoDeLally/formik-undo-demo\n\n\n## Setup\n\n```bash\nnpm install --save formik-undo\n```\n\n\n```tsx\nimport { FormikUndo } from 'formik-undo';\n\nconst autoSaveOptions = {\n  throttleDelay: 10000,\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cFormik\n      initialValues={initialValues}\n      onSubmit={handleSubmit}\n    \u003e\n      \u003cFormikUndo autoSave={autoSaveOptions}\u003e\n        \u003cMyForm /\u003e\n      \u003c/FormikUndo\u003e\n    \u003c/Formik\u003e\n  );\n};\n```\n\nProvider's props are as follow:\n\n| Name                         | Type                           | Default | Description                                                                    |\n| -----------------------------|--------------------------------|---------|--------------------------------------------------------------------------------|\n| `autoSave`                   | `boolean  \\| { ...options }`   | `true`  | If `false`, does not autosave.\u003cbr\u003eIf `true`, autosave with the default options.\u003cbr\u003eIf `object` autosave with the provided options. |\n| `autoSave.throttleDelay`     | `number`                       | 2000    | Frequency of autosaving in millisecond.\u003cbr\u003eIf `0`, save at every modification. |\n| `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.\u003cbr\u003eIf `false`, only the whole formik `values` object is considered and different fields changes may be aggregated from one checkpoint to another. |\n| `autoSave.preventWordCutting`| `boolean`                      | `true`  | If ``true``, when editing a string value, don't save in the middle of a word (experimental).  |\n\nIf you need a finer save trigger, write your own hook using the methods provided by `useFormikContext()` and `useFormikUndo()`.\n\n\n\n## Usage\n\n```tsx\nimport { useFormikUndo } from 'formik-undo';\n\nconst MyComponent = () =\u003e {\n  const { reset, undo, redo, saveCheckpoint } = useFormikUndo();\n  // Do stuff\n  return (\n    \u003cdiv\u003e\n      ...\n    \u003c/div\u003e\n  );\n};\n```\n\n| Name                         | Type                          | Description                                                    |\n| ---------------------------  |-------------------------------|----------------------------------------------------------------|\n| `reset`                      | `() =\u003e void`                  | Reset the form to the initial values.                          |\n| `undo`                       | `() =\u003e void`                  | Undo to previous checkpoint.                                   |\n| `redo`                       | `() =\u003e void`                  | Redo to next checkpoint.                                       |\n| `saveCheckpoint`             | `() =\u003e void`                  | Manually save a checkpoint to the history.                     |\n| `addCheckpointEquivalent`    | `(targetValue: Values, equivalentValue: Values) =\u003e void` | Declare that a certain value is equivalent to another, and therefore does not constitute a change worth saving (advanced).  |\n| `undoableCount`              | `number`                      | Number of possible undo actions.                               |\n| `redoableCount`              | `number`                      | Number of possible redo actions.                               |\n| `didCreateCurrentValues`     | `boolean`                     | Whether the latest form's values were set by us (advanced).    |\n\n\n\n## Control bar\n\nA control bar with default buttons is provided (as seen on the screenshot above).\n\n```tsx\nimport { FormikUndoControlBar } from 'formik-undo';\n\nconst MyForm = () =\u003e {\n  return (\n    \u003cForm\u003e\n      \u003cFormikUndoControlBar /\u003e\n      \u003cinput name=\"foo\" /\u003e\n      \u003cinput name=\"bar\" /\u003e\n    \u003c/Form\u003e\n  )\n};\n```\n\n`\u003cFormikUndoControlBar\u003e` accepts props:\n\n| Name                       | Type                                                    | Default                       | Description                                   |\n| ---------------------------|---------------------------------------------------------|-------------------------------|-----------------------------------------------|\n| `showReset`                | `boolean`                                               | `true`                        | Show the `reset` button.                      |\n| `showRedo`                 | `boolean`                                               | `true`                        | Show the `redo` button.                       |\n| `disabled`                 | `boolean`                                               | `false`                       | Disable every control.                        |\n| `className`                | `string`                                                |                               | Add extra classes to the control container.   |\n| `buttonTitles`             | `Record\u003c('reset' \\| 'undo' \\| 'redo'), string \\| null\u003e` | `\"Reset\"`, `\"Undo\"`, `\"Redo\"` | Override the `title` attribute of the button. |\n| `buttonClasses`            | `Record\u003c('reset' \\| 'undo' \\| 'redo'), string\u003e`         | `{}`                          | Add extra classes to some of the buttons.     |\n| `buttonIcons`              | `Record\u003c('reset' \\| 'undo' \\| 'redo'), ComponentType\u003e`  |  `\"↺\"`, `\"↶\"`, `\"↷\"`          | Override the buttons' content.                |\n| `buttonComponent`          | `ComponentType`                                         | \u003cbutton\u003e                      | Override the buttons' component.              |\n\n\n\n`formik-undo` has minimal dependencies.\n\nIf you use `Material-UI`, you can use a wrapper that prettifies the `FormikUndoControlBar`:\n\nhttps://github.com/OoDeLally/formik-undo/blob/master/extras/MaterialUiFormikUndoControlBar.tsx\n\n(Add the file into your project).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foodelally%2Fformik-undo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foodelally%2Fformik-undo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foodelally%2Fformik-undo/lists"}