{"id":13450902,"url":"https://github.com/msereniti/useDeferredState","last_synced_at":"2025-03-23T16:32:37.034Z","repository":{"id":57388019,"uuid":"342798672","full_name":"msereniti/useDeferredState","owner":"msereniti","description":"A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.","archived":false,"fork":false,"pushed_at":"2021-02-28T15:49:38.000Z","size":251,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T13:44:45.188Z","etag":null,"topics":["async","declarative-ui","hooks","react"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/use-deferred-state","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/msereniti.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":"2021-02-27T07:35:56.000Z","updated_at":"2023-09-06T11:57:56.000Z","dependencies_parsed_at":"2022-08-22T15:10:48.468Z","dependency_job_id":null,"html_url":"https://github.com/msereniti/useDeferredState","commit_stats":null,"previous_names":["phytonmk/usedeferredstate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msereniti%2FuseDeferredState","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msereniti%2FuseDeferredState/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msereniti%2FuseDeferredState/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msereniti%2FuseDeferredState/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msereniti","download_url":"https://codeload.github.com/msereniti/useDeferredState/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221856498,"owners_count":16892454,"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":["async","declarative-ui","hooks","react"],"created_at":"2024-07-31T07:00:40.019Z","updated_at":"2024-10-28T16:32:07.112Z","avatar_url":"https://github.com/msereniti.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# useDeferredState\n\nA React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.\n\n## Motivation\n\nThe problem of waiting a disappearing animation in React is common and usually being skipped as non-trivial. The goal of the project is to make an easy solution of the problem possible in declarative React way.\n\n## Installation\n\n```bash\nyarn add use-deferred-state\n```\n\nor, using npm\n\n```bash\nnpm install use-deferred-state\n```\n\n## Usage\n\n```tsx\nuseDeferredState\u003cBaseState\u003e(baseState: BaseState, instantValues: BaseState[] = [], defferFor = 500): BaseState\n```\n\nThe hook takes a `baseState` and returns it as is but all `baseState` changes are deferred for `defferFor` ms.\n\nYou can also pass an `instantValues` – array of possible base state values. When the provided base is equal (by `===` operator) to one of instant values, the returned value is changed immediately.\nIn example with modal window, displayed in section below, you need to pass `true` as one of instant values, that's creates the following state flows: [show modal -\u003e mount modal], [hide modal -\u003e wait for 500ms -\u003e unmount modal]\n\n### Minimal Example\n\n```tsx\nimport useDeferredState from 'use-deferred-state';\n\nexport const MyReactComponennts = () =\u003e {\n  const [showModal, setShowModal] = React.useState(false);\n  const renderModal = useDeferredState(showModal, [true], 500);\n\n  ...\n};\n```\n\n### Full example\n\n```tsx\nimport React from 'react';\nimport { useDeferredState } from 'use-deferred-state';\n\nexport const ExampleApp = () =\u003e {\n  const [showModal, setShowModal] = React.useState(false);\n  const renderModal = useDeferredState(showModal, [true], 500);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton className=\"toggleButton\" onClick={() =\u003e setShowModal((prevState) =\u003e !prevState)}\u003e\n        {showModal ? 'hide' : 'show'}\n      \u003c/button\u003e\n\n      \u003cp\u003eModal rendered: {String(renderModal)}\u003c/p\u003e\n\n      {renderModal \u0026\u0026 (\n        \u003cdiv className={showModal ? 'modal visible' : 'modal'}\u003e\n          \u003ch2\u003eHello world\u003c/h2\u003e\n          \u003cp\u003e\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex\n            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit\n            anim id est laborum.\n          \u003c/p\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n```\n\n![Demo](./demo.gif)\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsereniti%2FuseDeferredState","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsereniti%2FuseDeferredState","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsereniti%2FuseDeferredState/lists"}