{"id":13490737,"url":"https://github.com/iamyoki/transition-hook","last_synced_at":"2025-05-16T19:04:15.648Z","repository":{"id":40416701,"uuid":"438841343","full_name":"iamyoki/transition-hook","owner":"iamyoki","description":"☄️  An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group","archived":false,"fork":false,"pushed_at":"2023-06-19T11:24:07.000Z","size":6491,"stargazers_count":372,"open_issues_count":11,"forks_count":17,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-10T08:05:25.556Z","etag":null,"topics":["animation","animation-library","css","hook","hooks","react","react-spring","react-transition-group","transition-hook"],"latest_commit_sha":null,"homepage":"https://github.com/iamyoki/transition-hook#%EF%B8%8F-transition-hook","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/iamyoki.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-12-16T02:57:20.000Z","updated_at":"2025-02-12T11:25:18.000Z","dependencies_parsed_at":"2024-01-16T09:28:16.086Z","dependency_job_id":"cc6cc42d-38c6-46f0-abdb-507e285fecbf","html_url":"https://github.com/iamyoki/transition-hook","commit_stats":{"total_commits":64,"total_committers":3,"mean_commits":"21.333333333333332","dds":0.296875,"last_synced_commit":"12a16463062f15f4967a4f8d31de87387c9c7159"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamyoki%2Ftransition-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamyoki%2Ftransition-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamyoki%2Ftransition-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamyoki%2Ftransition-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamyoki","download_url":"https://codeload.github.com/iamyoki/transition-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248607048,"owners_count":21132463,"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":["animation","animation-library","css","hook","hooks","react","react-spring","react-transition-group","transition-hook"],"created_at":"2024-07-31T19:00:50.516Z","updated_at":"2025-04-12T17:39:50.603Z","avatar_url":"https://github.com/iamyoki.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e☄️ transition-hook\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/iamyoki/transition-hook/actions/workflows/test.yml\"\u003e\u003cimg src=\"https://github.com/iamyoki/transition-hook/actions/workflows/test.yml/badge.svg\" alt=\"🧪 Run Tests\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/iamyoki/transition-hook/actions/workflows/release.yml\"\u003e\u003cimg src=\"https://github.com/iamyoki/transition-hook/actions/workflows/release.yml/badge.svg\" alt=\"🚀 Release The Package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/iamyoki/transition-hook\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/transition-hook?color=%237B68EE\u0026label=Minizipped%20Size\" alt=\"transition hook\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iamyoki/transition-hook\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/iamyoki/transition-hook?color=Turquoise\" alt=\"\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAn extremely light-weight\u003cstrong\u003e(1kb)\u003c/strong\u003e react transition animation hook which is simpler and easier to use than \u003ca href=\"https://github.com/reactjs/react-transition-group\" target=\"_blank\"\u003ereact-transition-group\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://tqgdj.csb.app/\"\u003e\n    \u003cimg src=\"./example.gif\" width=\"300\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://tqgdj.csb.app/\"\u003eSee Example\u003c/a\u003e |\n  \u003ca href=\"https://codesandbox.io/s/transition-hook-example-tqgdj\"\u003eSee Example in Codesandbox\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://o3f41.csb.app/ripple-effect\"\u003e\n    \u003cimg src=\"./gifs/ripple-effect.gif\" height=\"150\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://o3f41.csb.app/emoji-switch-transition\"\u003e\n    \u003cimg src=\"./gifs/emoji-switch-transition.gif\" height=\"150\" alt=\"example\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://o3f41.csb.app/radio-transition\"\u003e\n    \u003cimg src=\"./gifs/radio-transition.gif\" height=\"150\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://o3f41.csb.app/painter\"\u003e\n    \u003cimg src=\"./gifs/painter.gif\" height=\"150\" alt=\"example\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://o3f41.csb.app/basic\"\u003e\n    \u003cimg src=\"./gifs/basic.gif\" height=\"120\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://o3f41.csb.app/basic-switch-transition\"\u003e\n    \u003cimg src=\"./gifs/basic-switch-transition.gif\" height=\"120\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://o3f41.csb.app/transition-with-key\"\u003e\n    \u003cimg src=\"./gifs/transition-with-key.gif\" height=\"120\" alt=\"example\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codesandbox.io/s/transition-hook-examples-o3f41\"\u003eSee More Examples in Codesandbox\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [useTransition](#usetransition)\n  - [useSwitchTransition](#useswitchtransition)\n  - [Transition](#transition)\n  - [SwitchTransition](#switchtransition)\n- [API Reference](#api-reference)\n  - [useTransition(state, timeout)](#usetransitionstate-timeout)\n  - [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)\n  - [Transition](#transition-1)\n  - [SwitchTransition](#switchtransition-1)\n  - [ListTransition](#listtransition)\n- [Also see these amazing hooks](#also-see-these-amazing-hooks)\n- [License](#license)\n\n## Installation\n\nInstall with yarn\n\n```bash\nyarn add transition-hook\n```\n\nOr install with npm\n\n```bash\nnpm install transition-hook --save\n```\n\n## Usage\n\n### useTransition\n\nThis hook transforms a boolean state into transition stage('from' | 'enter' | 'leave'), and unmount the component after timeout.\n\n```jsx\nconst [onOff, setOnOff] = useState(true)\nconst {stage, shouldMount} = useTransition(onOff, 300) // (state, timeout)\n\nreturn \u003cdiv\u003e\n  \u003cbutton onClick={()=\u003esetOnOff(!onOff)}\u003etoggle\u003c/button\u003e\n  {shouldMount \u0026\u0026 (\n    \u003cp style={{\n      transition: '.3s',\n      opacity: stage === 'enter' ? 1 : 0\n    }}\u003e\n      Hey guys, I'm fading\n    \u003c/p\u003e\n  )}\n\u003c/div\u003e\n```\n\n### useSwitchTransition\n\nThis hook transforms when the state changes.\n\n```jsx\nconst [count, setCount] = useState(0)\nconst transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)\n\nreturn \u003cdiv\u003e\n  \u003cbutton onClick={()=\u003esetCount(count+1)}\u003eadd\u003c/button\u003e\n  {transition((state, stage)=\u003e(\n    \u003cp style={{\n      transition: '.3s',\n      opacity: stage === 'enter' ? 1 : 0,\n      transform: {\n        from: 'translateX(-100%)',\n        enter: 'translateX(0%)',\n        leave: 'translateX(100%)',\n      }[stage]\n    }}\u003e{state}\u003c/p\u003e\n  ))}\n\u003c/div\u003e\n```\n\n### Transition\n\nIf you prefer FaCC pattern usage, there it is!\n\n```jsx\nconst [onOff, setOnOff] = useState(true)\n\nreturn \u003cdiv\u003e\n  \u003cbutton onClick={()=\u003esetOnOff(!onOff)}\u003etoggle\u003c/button\u003e\n  \u003cTransition state={onOff} timeout={300}\u003e\n    {(stage, shouldMount)=\u003eshouldMount \u0026\u0026(\n      \u003cp style={{\n        transition: '.3s',\n        opacity: stage === 'enter' ? 1 : 0\n      }}\u003e\n        Hey guys, I'm fading\n      \u003c/p\u003e\n    )}\n  \u003c/Transition\u003e\n\u003c/div\u003e\n```\n\n### SwitchTransition\n\nFaCC pattern version of useSwitchTransition\n\n```jsx\n  \u003cSwitchTransition state={count} timeout={300} mode='default'\u003e\n    {(state, stage) =\u003e (\n      \u003ch1\n        style={{\n          transition: '.3s',\n          opacity: stage === 'enter' ? 1 : 0,\n          transform: {\n            from: 'translateX(-100%) scale(1.2)',\n            enter: 'translateX(0)',\n            leave: 'translateX(100%) scale(0)'\n          }[stage]\n        }}\u003e\n        {state} {stage} hello\n      \u003c/h1\u003e\n    )}\n  \u003c/SwitchTransition\u003e\n```\n\n## API Reference\n\n### useTransition(state, timeout)\n\n```js\n  const {stage, shouldMount} = useTransition(onOff, 300)\n```\n\n| Parameters | Type      | Description                                                           |\n| :--------- | :-------- | :-------------------------------------------------------------------- |\n| `state`    | `boolean` | **Required**. Your boolean state, which controls animation in and out |\n| `timeout`  | `number`  | **Required**. How long before the animation ends and unmounts         |\n\n\u003cbr\u003e\n\n| Returns       | Type                                | Description                                         |\n| :------------ | :---------------------------------- | :-------------------------------------------------- |\n| `stage`       | Stage: `from` \\| `enter` \\| `leave` | Use three different stage to perform your animation |\n| `shouldMount` | `boolean`                           | Whether the component should be mounted             |\n\n### useSwitchTransition(state, timeout, mode)\n\n```js\n  const transition = useSwitchTransition(onOff, 300, 'default')\n```\n\n| Parameters | Type                              | Description                                                   |\n| :--------- | :-------------------------------- | :------------------------------------------------------------ |\n| `state`    | `any`                             | **Required**. Your state, which triggers animation            |\n| `timeout`  | `number`                          | **Required**. How long before the animation ends and unmounts |\n| `mode`     | `default` \\| `out-in` \\| `in-out` | **Optional**. Default to `default` mode                       |\n\n### Transition\n\n```jsx\n  \u003cTransition state={onOff} timeout={300}\u003e\n    {(stage, shouldMount) =\u003e shouldMount \u0026\u0026 \u003cdiv style={{...}}\u003ehello\u003c/div\u003e}\n  \u003c/Transition\u003e\n```\n\n| Props      | Type                                                    | Description                                                           |\n| :--------- | :------------------------------------------------------ | :-------------------------------------------------------------------- |\n| `state`    | `boolean`                                               | **Required**. Your boolean state, which controls animation in and out |\n| `timeout`  | `number`                                                | **Required**. How long before the animation ends and unmounts         |\n| `children` | `(stage: Stage, shouldMount: boolean)=\u003eReact.ReactNode` | **Required**. FaCC pattern.                                           |\n\n### SwitchTransition\n\n```jsx\n  \u003cSwitchTransition state={count} timeout={300}\u003e\n    {(state, stage) =\u003e \u003cdiv style={{...}}\u003e{state} hello\u003c/div\u003e}\n  \u003c/SwitchTransition\u003e\n```\n\n| Props      | Type                                          | Description                                                           |\n| :--------- | :-------------------------------------------- | :-------------------------------------------------------------------- |\n| `state`    | `any`                                         | **Required**. Your boolean state, which controls animation in and out |\n| `timeout`  | `number`                                      | **Required**. How long before the animation ends and unmounts         |\n| `mode`     | `default` \\| `out-in` \\| `in-out`             | **Optional**. Default to `default` mode                               |\n| `children` | `(state: any, stage: Stage)=\u003eReact.ReactNode` | **Required**. FaCC pattern.                                           |\n\n### ListTransition\n\n```jsx\n  \u003cListTransition list={list} timeout={300}\u003e\n    {(item, stage)=\u003e\u003ch1 style={...}\u003e{item}\u003c/h1\u003e}\n  \u003c/ListTransition\u003e\n```\n\n| Props      | Type                                         | Description                                                   |\n| :--------- | :------------------------------------------- | :------------------------------------------------------------ |\n| `list`     | `Array\u003cany\u003e`                                 | **Required**. Your array state                                |\n| `timeout`  | `number`                                     | **Required**. How long before the animation ends and unmounts |\n| `children` | `(item: any, stage: Stage)=\u003eReact.ReactNode` | **Required**. FaCC pattern.                                   |\n\n## Also see these amazing hooks\n\n| Repo                                                                      | Intro                                                     |\n| :------------------------------------------------------------------------ | :-------------------------------------------------------- |\n| [🧻 infinite-scroll-hook](https://github.com/iamyoki/infinite-scroll-hook) | Scroll down to load more never been so easy!              |\n| [☄️ transition-hook](https://github.com/iamyoki/transition-hook)           | An extremely light-weight react transition animation hook |\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamyoki%2Ftransition-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamyoki%2Ftransition-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamyoki%2Ftransition-hook/lists"}