{"id":26243978,"url":"https://github.com/wintercounter/use-start-view-transition","last_synced_at":"2026-02-01T18:32:40.748Z","repository":{"id":259578285,"uuid":"877822370","full_name":"wintercounter/use-start-view-transition","owner":"wintercounter","description":"A set of hooks to use `document.startViewTransition` upon state/value changes","archived":false,"fork":false,"pushed_at":"2024-12-19T12:53:02.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T04:30:48.734Z","etag":null,"topics":[],"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/wintercounter.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,"zenodo":null}},"created_at":"2024-10-24T09:55:06.000Z","updated_at":"2024-12-19T12:53:06.000Z","dependencies_parsed_at":"2024-10-26T17:30:41.757Z","dependency_job_id":"163a262f-7ed5-4ac9-a0c9-70a9baaf6a01","html_url":"https://github.com/wintercounter/use-start-view-transition","commit_stats":null,"previous_names":["wintercounter/use-start-view-transition"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wintercounter/use-start-view-transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-start-view-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-start-view-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-start-view-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-start-view-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wintercounter","download_url":"https://codeload.github.com/wintercounter/use-start-view-transition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-start-view-transition/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28985818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T18:17:03.387Z","status":"ssl_error","status_checked_at":"2026-02-01T18:16:57.287Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-03-13T10:38:18.149Z","updated_at":"2026-02-01T18:32:40.730Z","avatar_url":"https://github.com/wintercounter.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-start-view-transition\n\nA set of hooks and utils to use `document.startViewTransition` upon state/value changes.\n\n## Demo \u0026 Playground\n\nhttps://codesandbox.io/p/sandbox/hsrt6g\n\n## Installation\n\n```shell\nnpm i use-start-view-transition\n```\n\n## Usage\n\n### `startViewTransition`\n\nA simply utility function that wraps the `document.startViewTransition` method. It supports server-side rendering and\nalso gracefully falls back the method is not available in your browser.\n\n```tsx\nimport { startViewTransition } from 'use-start-view-transition'\n\nstartViewTransition(() =\u003e {\n    // Your code here\n})\n```\n\n### `useStartViewTransitionState`\n\nStraight up replacement for `useState` that starts a view transition upon state changes.\n\n```tsx\nimport { useStartViewTransitionState } from 'use-start-view-transition'\n\nconst [state, setState] = useStartViewTransitionState(0)\n```\n\n### `useStartViewTransitionWrap`\n\nA hook that can be used to wrap any tuples with the following shape: `[state, setState]`. It gives support to any state\nmanagement library/util that uses the same shape.\n\n```tsx\nimport { useStartViewTransitionWrap } from 'use-start-view-transition'\nimport { useLocalStorage } from 'react-use'\n\nconst keyState = useLocalStorage('key', 0)\nconst [key, setKey] = useStartViewTransitionWrap(keyState)\n\n// Or simply\n\nconst [key, setKey] = useStartViewTransitionWrap(useLocalStorage('key', 0))\n```\n\n### `useStartViewTransitionValue`\n\nA hook that lets you start a view transition upon a value has been changed. It's useful when you don't have access to\nthe underlying state setter.\n\n```tsx\nimport { useStartViewTransitionValue } from 'use-start-view-transition'\nimport { useQuery } from 'react-query'\n\nconst { isLoading: _isLoading } = useQuery({})\nconst isLoading = useStartViewTransitionValue(_isLoading)\n```\n\n## Options\n\nAll hooks accept an optional second argument that is an object with the following shape:\n\n```tsx\n{\n    skipTransition: boolean | (value =\u003e boolean)\n}\n```\n\n### `skipTransition`\n\nA boolean or a function that returns a boolean. If `true`, the view transition will be skipped. If a function is\nprovided, it will be called with the new value and should return a boolean. This is useful to handle cases where you\ndon't want to start a view transition. For example, you only want a transition when the value is greater than 10.\n\n```tsx\nconst [state, setState] = useStartViewTransitionState(0, {\n    skipTransition: value =\u003e value \u003c 10\n})\n```\n\n## Asynchronous State Changes\n\nThere are cases when you'd like wait for the view transition to be done before doing something else. All hooks and utils\nare returning a promise that resolves when the view transition is done.\n\n```tsx\nimport { startViewTransition, useStarViewTransitionState } from 'use-start-view-transition'\n\nconst [state, setState] = useStartViewTransitionState(0)\n\nconst handleClick = async () =\u003e {\n    await startViewTransition(() =\u003e {\n        // Do something\n    })\n\n    // Do something else\n}\n\nconst handleSelect = async value =\u003e {\n    await setState(value)\n\n    // Do something else\n}\n```\n\n## Controlling transition styles\n\nhttps://developer.chrome.com/docs/web-platform/view-transitions/same-document\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercounter%2Fuse-start-view-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwintercounter%2Fuse-start-view-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercounter%2Fuse-start-view-transition/lists"}