{"_id":"@vanyapr/transition-hook","_rev":"2-b6c2e68a93bc60764a6ccc86aa54d10f","name":"@vanyapr/transition-hook","dist-tags":{"latest":"1.5.4"},"versions":{"1.5.2":{"name":"@vanyapr/transition-hook","version":"1.5.2","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","author":{"name":"Yoki Yu","email":"yokiyuqian@gmail.com"},"description":"โ˜„๏ธ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group","keywords":["react","transition","hooks","css","animation","transition-hook","use-transition","react-transition-group"],"license":"MIT","scripts":{"prepare":"husky install","๐Ÿ“ฆ --- Builds":"","build:cjs":"tsc -p .","build:esm":"tsc -p . --module esnext --outDir dist/esm","build:types":"tsc -p . -d --emitDeclarationOnly --outDir dist/types","๐ŸŒŸ --- Mains":"","clean":"rimraf dist","build":"yarn clean && run-p build:*","dev":"yarn clean && run-p \"build:* --sourceMap --watch\"","lint":"eslint \"src/**/*.{ts,tsx}\" --fix","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies":{"@commitlint/cli":"^15.0.0","@commitlint/config-conventional":"^15.0.0","@qhlab/eslint-plugin":"^1.10.0","@semantic-release/changelog":"^6.0.1","@semantic-release/git":"^10.0.1","@types/react":"^17.0.37","conventional-changelog-conventionalcommits":"^4.6.1","eslint":"^8.4.1","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.4","lint-staged":"^12.1.2","npm-run-all":"^4.1.5","prettier":"^2.5.1","rimraf":"^3.0.2","semantic-release":"^18.0.1","semantic-release-cli":"^5.4.4","typescript":"^4.5.4"},"repository":{"type":"git","url":"git+https://github.com/iamyoki/transition-hook.git"},"gitHead":"73a459e319a783683034e496040e50ce479d6c7a","bugs":{"url":"https://github.com/iamyoki/transition-hook/issues"},"homepage":"https://github.com/iamyoki/transition-hook#readme","_id":"@vanyapr/transition-hook@1.5.2","_nodeVersion":"18.12.1","_npmVersion":"9.6.1","dist":{"integrity":"sha512-AXNieUQf8oiydv/4seWfMZc82zk14GYGjW+AAmbqHWPWy+9pQNyye4efiy/7vNbGTeWJJ3IS//nDJj0K38LeNg==","shasum":"29f1af24e74cd5e550d3a8fa577151f50cb5c088","tarball":"https://registry.npmjs.org/@vanyapr/transition-hook/-/transition-hook-1.5.2.tgz","fileCount":3,"unpackedSize":13367,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHnAYbw9uFYQPwPI4eiGzuFI1fgxHMnBMKH0Z2AB9oHgIhAPBcKnpeNB2EPefH129/1w/LwftgIH+Awi7XptxrgZWc"}]},"_npmUser":{"name":"vanyapr","email":"snowflax@ya.ru"},"directories":{},"maintainers":[{"name":"vanyapr","email":"snowflax@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/transition-hook_1.5.2_1687173931140_0.749080269676965"},"_hasShrinkwrap":false},"1.5.3":{"name":"@vanyapr/transition-hook","version":"1.5.3","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","author":{"name":"Yoki Yu","email":"yokiyuqian@gmail.com"},"description":"โ˜„๏ธ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group","keywords":["react","transition","hooks","css","animation","transition-hook","use-transition","react-transition-group"],"license":"MIT","scripts":{"prepare":"husky install","๐Ÿ“ฆ --- Builds":"","build:cjs":"tsc -p .","build:esm":"tsc -p . --module esnext --outDir dist/esm","build:types":"tsc -p . -d --emitDeclarationOnly --outDir dist/types","๐ŸŒŸ --- Mains":"","clean":"rimraf dist","build":"yarn clean && run-p build:*","dev":"yarn clean && run-p \"build:* --sourceMap --watch\"","lint":"eslint \"src/**/*.{ts,tsx}\" --fix","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies":{"@commitlint/cli":"^15.0.0","@commitlint/config-conventional":"^15.0.0","@qhlab/eslint-plugin":"^1.10.0","@semantic-release/changelog":"^6.0.1","@semantic-release/git":"^10.0.1","@types/react":"^17.0.37","conventional-changelog-conventionalcommits":"^4.6.1","eslint":"^8.4.1","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.4","lint-staged":"^12.1.2","npm-run-all":"^4.1.5","prettier":"^2.5.1","rimraf":"^3.0.2","semantic-release":"^18.0.1","semantic-release-cli":"^5.4.4","typescript":"^4.5.4"},"repository":{"type":"git","url":"git+https://github.com/vanyapr/transition-hook.git"},"gitHead":"73a459e319a783683034e496040e50ce479d6c7a","bugs":{"url":"https://github.com/vanyapr/transition-hook/issues"},"homepage":"https://github.com/vanyapr/transition-hook#readme","_id":"@vanyapr/transition-hook@1.5.3","_nodeVersion":"18.12.1","_npmVersion":"9.6.1","dist":{"integrity":"sha512-txuqUqJVnuaHFh7QkK1QyeGSji3q0JM0p8D9xXF34RUPH+4jLC+V3qq9BIQirJauajxuDhqJ0OaFnyKO5r4L/w==","shasum":"127ef4e102807c1f7a9de823ddd2d5d521219597","tarball":"https://registry.npmjs.org/@vanyapr/transition-hook/-/transition-hook-1.5.3.tgz","fileCount":3,"unpackedSize":13367,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv50r5q5JoaROq3V3eDCO9z3/Nza/3ltGYOWwZ04fEnAIgRbt9vuQlQ8osSCNa72KxmvdbJcsPsa6UJksNwNgVKlg="}]},"_npmUser":{"name":"vanyapr","email":"snowflax@ya.ru"},"directories":{},"maintainers":[{"name":"vanyapr","email":"snowflax@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/transition-hook_1.5.3_1687174137501_0.7310348292015998"},"_hasShrinkwrap":false},"1.5.4":{"name":"@vanyapr/transition-hook","version":"1.5.4","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","author":{"name":"Yoki Yu","email":"yokiyuqian@gmail.com"},"description":"โ˜„๏ธ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group","keywords":["react","transition","hooks","css","animation","transition-hook","use-transition","react-transition-group"],"license":"MIT","scripts":{"prepare":"husky install","๐Ÿ“ฆ --- Builds":"","build:cjs":"tsc -p .","build:esm":"tsc -p . --module esnext --outDir dist/esm","build:types":"tsc -p . -d --emitDeclarationOnly --outDir dist/types","๐ŸŒŸ --- Mains":"","clean":"rimraf dist","build":"yarn clean && run-p build:*","dev":"yarn clean && run-p \"build:* --sourceMap --watch\"","lint":"eslint \"src/**/*.{ts,tsx}\" --fix","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies":{"@commitlint/cli":"^15.0.0","@commitlint/config-conventional":"^15.0.0","@qhlab/eslint-plugin":"^1.10.0","@semantic-release/changelog":"^6.0.1","@semantic-release/git":"^10.0.1","@types/react":"^17.0.37","conventional-changelog-conventionalcommits":"^4.6.1","eslint":"^8.4.1","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.4","lint-staged":"^12.1.2","npm-run-all":"^4.1.5","prettier":"^2.5.1","rimraf":"^3.0.2","semantic-release":"^18.0.1","semantic-release-cli":"^5.4.4","typescript":"^4.5.4"},"repository":{"type":"git","url":"git+https://github.com/vanyapr/transition-hook.git"},"gitHead":"73a459e319a783683034e496040e50ce479d6c7a","bugs":{"url":"https://github.com/vanyapr/transition-hook/issues"},"homepage":"https://github.com/vanyapr/transition-hook#readme","_id":"@vanyapr/transition-hook@1.5.4","_nodeVersion":"18.12.1","_npmVersion":"9.6.1","dist":{"integrity":"sha512-e2yyj6Yy3RFT0mODZMs+x3WOS7N0WGDxWQISj4FyYPTEUFBJELsZzZQv+thDF+fCV9hFxbG93kYbxMZeGRuclg==","shasum":"6b19f27968972e73e64027ef4e6b4db6c1ff1cf2","tarball":"https://registry.npmjs.org/@vanyapr/transition-hook/-/transition-hook-1.5.4.tgz","fileCount":42,"unpackedSize":43964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoz3htUhjX/iY42NUzuU43Kc9t0pynaah/7s1ka2k5lAiBT/qnTzSnzOjiXDl6b3hMxhL7G00E45vTO31XbYQ/R2A=="}]},"_npmUser":{"name":"vanyapr","email":"snowflax@ya.ru"},"directories":{},"maintainers":[{"name":"vanyapr","email":"snowflax@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/transition-hook_1.5.4_1687174328101_0.9665317613061466"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-19T11:25:31.067Z","1.5.2":"2023-06-19T11:25:31.300Z","modified":"2023-06-19T11:32:08.384Z","1.5.3":"2023-06-19T11:28:57.672Z","1.5.4":"2023-06-19T11:32:08.278Z"},"maintainers":[{"name":"vanyapr","email":"snowflax@ya.ru"}],"description":"โ˜„๏ธ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group","homepage":"https://github.com/vanyapr/transition-hook#readme","keywords":["react","transition","hooks","css","animation","transition-hook","use-transition","react-transition-group"],"repository":{"type":"git","url":"git+https://github.com/vanyapr/transition-hook.git"},"author":{"name":"Yoki Yu","email":"yokiyuqian@gmail.com"},"bugs":{"url":"https://github.com/vanyapr/transition-hook/issues"},"license":"MIT","readme":"

โ˜„๏ธ transition-hook

\n\n

\n \"๐Ÿงช\n \"๐Ÿš€\n \n \"transition\n \n \n \"\"\n \n

\n\n

An extremely light-weight(1kb) react transition animation hook which is simpler and easier to use than react-transition-group

\n
\n\n

\n \n \"example\"\n \n
\n See Example |\n See Example in Codesandbox\n

\n\n

\n \n \"example\"\n \n \n \"example\"\n \n

\n\n

\n \n \"example\"\n \n \n \"example\"\n \n

\n\n

\n \n \"example\"\n \n \n \"example\"\n \n \n \"example\"\n \n

\n\n

\n See More Examples in Codesandbox\n

\n
\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
\n \n {shouldMount && (\n

\n Hey guys, I'm fading\n

\n )}\n
\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
\n \n {transition((state, stage)=>(\n

{state}

\n ))}\n
\n```\n\n### Transition\n\nIf you prefer FaCC pattern usage, there it is!\n\n```jsx\nconst [onOff, setOnOff] = useState(true)\n\nreturn
\n \n \n {(stage, shouldMount)=>shouldMount &&(\n

\n Hey guys, I'm fading\n

\n )}\n \n
\n```\n\n### SwitchTransition\n\nFaCC pattern version of useSwitchTransition\n\n```jsx\n \n {(state, stage) => (\n \n {state} {stage} hello\n \n )}\n \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
\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 \n {(stage, shouldMount) => shouldMount &&
hello
}\n \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)=>React.ReactNode` | **Required**. FaCC pattern. |\n\n### SwitchTransition\n\n```jsx\n \n {(state, stage) =>
{state} hello
}\n \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)=>React.ReactNode` | **Required**. FaCC pattern. |\n\n### ListTransition\n\n```jsx\n \n {(item, stage)=>

{item}

}\n \n```\n\n| Props | Type | Description |\n| :--------- | :------------------------------------------- | :------------------------------------------------------------ |\n| `list` | `Array` | **Required**. Your array state |\n| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |\n| `children` | `(item: any, stage: Stage)=>React.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","readmeFilename":"README.md"}