{"id":13776771,"url":"https://github.com/SawyerHood/recoil-undo","last_synced_at":"2025-05-11T10:31:14.489Z","repository":{"id":41585756,"uuid":"273775482","full_name":"SawyerHood/recoil-undo","owner":"SawyerHood","description":"Undo functionality for the recoil state management library","archived":false,"fork":false,"pushed_at":"2023-01-07T22:07:26.000Z","size":2296,"stargazers_count":40,"open_issues_count":22,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-05T18:36:09.209Z","etag":null,"topics":["react","recoil","recoiljs","undo"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SawyerHood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-20T19:56:16.000Z","updated_at":"2024-03-11T05:42:04.000Z","dependencies_parsed_at":"2023-02-08T02:32:46.224Z","dependency_job_id":null,"html_url":"https://github.com/SawyerHood/recoil-undo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SawyerHood%2Frecoil-undo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SawyerHood%2Frecoil-undo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SawyerHood%2Frecoil-undo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SawyerHood%2Frecoil-undo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SawyerHood","download_url":"https://codeload.github.com/SawyerHood/recoil-undo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551678,"owners_count":21926335,"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":["react","recoil","recoiljs","undo"],"created_at":"2024-08-03T18:00:32.853Z","updated_at":"2025-05-11T10:31:14.466Z","avatar_url":"https://github.com/SawyerHood.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":["Typescript"],"readme":"# recoil-undo\n\n\u003e Undo functionality for the recoil state management library\n\n[![NPM](https://img.shields.io/npm/v/recoil-undo.svg)](https://www.npmjs.com/package/recoil-undo)\n\n## Notice\n\nThis is an incredibly early library and much like recoil itself the api will almost certainly change. Right now the functionality is very basic, but expect it to come much more robust over time and those changes might not be backwards compatible at the moment.\n\n## Install\n\n`recoil-undo` relies on both React and Recoil installed as peer dependencies so make sure they are installed as well.\n\n```bash\nnpm install --save recoil-undo\n```\n\nor\n\n```bash\nyarn add recoil-undo\n```\n\n## Usage\n\nMake sure that you include you put `RecoilUndoRoot` under `RecoilRoot`. From there you can use the `useUndo` hook that will return a callback that will undo the last state change.\nThe library is written in typescript and ts support work out of the box.\n\n```tsx\nimport React from 'react';\nimport { RecoilRoot, atom, useRecoilState } from 'recoil';\nimport { RecoilUndoRoot, useUndo, useRedo } from 'recoil-undo';\n\nconst COUNT = atom({\n  default: 0,\n  key: 'count',\n});\n\nconst App = () =\u003e {\n  return (\n    \u003cRecoilRoot\u003e\n      \u003cRecoilUndoRoot\u003e\n        \u003cCounter /\u003e\n      \u003c/RecoilUndoRoot\u003e\n    \u003c/RecoilRoot\u003e\n  );\n};\n\nfunction Counter() {\n  const [count, setCount] = useRecoilState(COUNT);\n  const undo = useUndo();\n  const redo = useRedo();\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e setCount((count) =\u003e count - 1)}\u003e-\u003c/button\u003e\n        {count}\n        \u003cbutton onClick={() =\u003e setCount((count) =\u003e count + 1)}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cbutton onClick={undo}\u003eUndo\u003c/button\u003e\n      \u003cbutton onClick={redo}\u003eRedo\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Api\n\n### RecoilUndoRoot\n\nThis component is exported from `recoil-undo` and should be placed right under the `RecoilRoot` provider in the application.\nIt is responsible for keeping track of the undo history from your `recoil` state. At the moment it takes a few optional properties:\n* `trackedAtoms` which is an array of `RecoilState` (the value that is returned from `atom` in `recoil`). If `trackedAtoms` is passed into\n`RecoilUndoRoot` the undo stack will only apply to the atoms provided, all other atoms will be ignored when undoing / redoing. Note: there is\nno reason to track selectors, as their values will be updated as the atoms change.\n* `trackingByDefault` which is a boolean value (default is true) where you can skip history tracking if required\n\nIf `trackedAtoms` is not passed to `RecoilUndoState` all atoms will be tracked by `recoil-undo`.\n\n### useUndo\n\nThis hook returns a function that when called will move all tracked atoms to the previous history state.\n\n### useRedo\n\nThis hook returns a function that when called will move all tracked atoms to the next history state.\n\n### useBatching\n\nThis hook returns an object with two properties `startBatch` and `endBatch`. There are many situations where you might want to turn mutliple user interactions into a single item in the undo stack.\nExample: suppose a user is dragging an object across the screen, you don't want to record every mouse move as an undoable operation. Instead, you only want to record the start and end position on the undo stack.\nIn cases like these, you can call `startBatch` and `endBatch` to make sure multiple atom updates only add a single item to the undo stack.\n\n```js\nconst { startBatch, endBatch } = useBatching();\n\nconst onMouseDown = () =\u003e {\n  startBatch();\n};\n\nconst onMouseMove = () =\u003e {\n  // Update item position\n};\n\nconst onMouseUp = () =\u003e {\n  endBatch();\n};\n```\n\n### useIsTrackingHistory\nThis will start / stop tracking history if required.\n\n```js\nconst {getIsTrackingHistory, setIsTrackingHistory} = useIsTrackingHistory();\n\n// getIsTrackingHistory() === false\nsetIsTrackingHistory(true);\n// ... after a re-render\n// getIsTrackingHistory() === true\n```\n\n## Roadmap\n\n- Undo scoping (keep multiple undo stacks in a single application)\n\n## License\n\nMIT © [SawyerHood](https://github.com/SawyerHood)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSawyerHood%2Frecoil-undo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSawyerHood%2Frecoil-undo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSawyerHood%2Frecoil-undo/lists"}