{"id":25655439,"url":"https://github.com/dgpedro/react-component-transition","last_synced_at":"2025-04-19T02:49:02.154Z","repository":{"id":48693181,"uuid":"313111744","full_name":"dgpedro/react-component-transition","owner":"dgpedro","description":"Easy animations between react component transitions.","archived":false,"fork":false,"pushed_at":"2024-01-22T17:52:41.000Z","size":1188,"stargazers_count":28,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T04:41:19.964Z","etag":null,"topics":["animation","components","lazy","react","transitions","typescript","web-animations-api"],"latest_commit_sha":null,"homepage":"","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/dgpedro.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}},"created_at":"2020-11-15T19:56:30.000Z","updated_at":"2025-02-05T10:42:48.000Z","dependencies_parsed_at":"2024-06-21T07:25:57.250Z","dependency_job_id":null,"html_url":"https://github.com/dgpedro/react-component-transition","commit_stats":{"total_commits":51,"total_committers":3,"mean_commits":17.0,"dds":0.05882352941176472,"last_synced_commit":"b8ee9ae324533e5da786cf9c363cd4bfe9c6f8f4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgpedro%2Freact-component-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgpedro%2Freact-component-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgpedro%2Freact-component-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgpedro%2Freact-component-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgpedro","download_url":"https://codeload.github.com/dgpedro/react-component-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249596515,"owners_count":21297396,"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","components","lazy","react","transitions","typescript","web-animations-api"],"created_at":"2025-02-23T21:29:01.138Z","updated_at":"2025-04-19T02:49:02.134Z","avatar_url":"https://github.com/dgpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-component-transition\n\nEasy to use react component to apply animations between component transitions, by using **[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)**.\n\n## Demo\n**[https://dgpedro.github.io/react-component-transition/](https://dgpedro.github.io/react-component-transition/)**\n\n## Install\n\n```\nnpm install react-component-transition --save\n```\n\n## Typescript\n\nTypes are included in the package.\n\n## Goal\n\nThe main goal is to provide an easy and fast way to apply simple animations when transitioning from one component to another - without losing too much time testing, adjusting, styling, etc...\nIn just a couple of lines it's possible to make any react page much more interactive and user friendly.\n\n## Polyfills\n\nDepending on the browser to support, some polyfills might be needed:\n\n- **[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#browser_support)**\n- **[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility)** (only if `lazy` prop set to `true`)\n- **[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#browser_compatibility)**\n\n## Usage\n\n### ComponentTransition\n\n```javascript\nimport { ComponentTransition, AnimationTypes } from \"react-component-transition\";\nconst Component = () =\u003e {\n\n    // ...\n\n    return (\n        \u003cComponentTransition\n            enterAnimation={AnimationTypes.scale.enter}\n            exitAnimation={AnimationTypes.fade.exit}\n        \u003e\n            {showDetails ? \u003cDetails /\u003e : \u003cSummary /\u003e}\n        \u003c/ComponentTransition\u003e\n    );\n};\n```\n\n### Presets\n\nPresets are components that have `enterAnimation` and `exitAnimation` already set, for an easier and cleaner usage.\n\n```javascript\nimport { Presets } from \"react-component-transition\";\nconst Component = () =\u003e {\n    \n    // ...\n\n    return (\n        \u003cPresets.TransitionFade\u003e\n            {show \u0026\u0026 \u003cDetails /\u003e}\n        \u003c/Presets.TransitionFade\u003e\n    );\n};\n```\n\nThere's a preset available for each `AnimationTypes`.\n\n### ComponentTransitionList\n\nTo be used with lists. Simply return a `ComponentTransition` or any preset in your `map` function and wrap it all with a `ComponentTransitionList`.\n\n```javascript\nimport { ComponentTransitionList, Presets } from \"react-component-transition\";\nconst Component = () =\u003e {\n    \n    // ...\n\n    return (\n        \u003cComponentTransitionList\u003e\n            {list.map((listItem, index) =\u003e\n                \u003cPresets.TransitionScale key={index}\u003e\n                    \u003cListItem {...listItem} /\u003e\n                \u003c/Presets.TransitionScale\u003e\n            )}\n        \u003c/ComponentTransitionList\u003e\n    );\n};\n```\n### With react-router\n\n```javascript\nimport { useLocation } from \"react-router-dom\";\nconst AppRoutes = () =\u003e {\n    const location = useLocation();\n    return (\n        \u003cComponentTransition\n            enterAnimation={AnimationTypes.slideUp.enter}\n            exitAnimation={AnimationTypes.slideDown.exit}\n        \u003e\n            \u003cSwitch key={location.key} location={location}\u003e\n                \u003cRoute ... /\u003e\n                \u003cRoute ... /\u003e\n                \u003cRoute ... /\u003e\n            \u003c/Switch\u003e\n        \u003c/ComponentTransition\u003e\n    );\n};\n```\n\n```javascript\nimport { BrowserRouter } from \"react-router-dom\";\nconst App = () =\u003e (\n    \u003cBrowserRouter\u003e\n        \u003cAppRoutes /\u003e\n    \u003c/BrowserRouter\u003e\n);\n```\n\n### Custom animation\n\n```javascript\nimport { ComponentTransition, AnimationTypes } from \"react-component-transition\";\nconst Component = () =\u003e {\n\n    // ...\n\n    return (\n        \u003cComponentTransition\n            enterAnimation={[\n                AnimationTypes.slideUp.enter,\n                AnimationTypes.fade.enter,\n            ]}\n            exitAnimation={[{\n                keyframes: [\n                    { transform: \"translate3d(0,0,0)\" },\n                    { transform: \"translate3d(0,50%,0)\" },\n                    { transform: \"translate3d(0,80%,0)\" },\n                    { transform: \"translate3d(0,90%,0)\" },\n                    { transform: \"translate3d(0,100%,0)\" },\n                ],\n                options: {\n                    duration: 500,\n                    easing: \"cubic-bezier(0.83, 0, 0.17, 1)\",\n                }\n            },\n            {\n                keyframes: [\n                    { opacity: 1 },\n                    { opacity: 0.3 },\n                    { opacity: 0.1 },\n                    { opacity: 0 },\n                ],\n                options: {\n                    duration: 300,\n                }\n            }]\n            }\n        \u003e\n            \u003cDetails key={selectedTab} /\u003e\n        \u003c/ComponentTransition\u003e\n    );\n};\n```\n\n## API\n\n### AnimationTypes\n\n`AnimationTypes` are a set of animations already defined that can be used in `enterAnimation` and/or `exitAnimation` props. Availabe ones are:\n\n```\ncollapse.(horizontal|vertical)\nexpand.(horizontal|vertical)\nfade.(enter|exit)\nrotate.(enter|exit)\nrotateX.(enter|exit)\nrotateY.(enter|exit)\nscale.(enter|exit)\nslideDown.(enter|exit)\nslideLeft.(enter|exit)\nslideRight.(enter|exit)\nslideUp.(enter|exit)\n```\n\nFor each type of `AnimationTypes` there's a respective preset.\n\n### props\n\nAll presets and the `ComponentTransition` will wrap their `children` in a `div` element. This `div` is the element that will animate when `children` are unmounting or mounting (it is referenced here as \"container\"). \n\nName | Type | Default | Description\n-----|------|---------|------------\nanimateContainer | boolean | `false` | if `true` the container will also animate from the exit component size to the enter component size\u003cbr /\u003e**NOTE:** _All presets have this prop set to `true` by default_\nanimateContainerDuration | number | 300 | Duration in milliseconds of the container animation\nanimateContainerEasing | string | \"ease\" | Easing of container animation\nanimateOnMount | boolean | `false` | if `true`, applies `enterAnimation` when component mounts in the initial render\nclassName | string | `undefined` | CSS class to set in the container element\nclassNameEnter | string | `undefined` | CSS class to set in the container element during `enterAnimation`\nclassNameExit | string | `undefined` | CSS class to set in the container element during `exitAnimation`\ndisabled | boolean | `false` | disable all animations\nenterAnimation | AnimationSettings \\| AnimationSettings[] | `undefined` | [Web Animations API parameters](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Parameters) to be applied when new component mounts\nexitAnimation | AnimationSettings \\| AnimationSettings[] | `undefined` | [Web Animations API parameters](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Parameters) to be applied when current component will unmount\nlazy | boolean | `false` | Will apply `enterAnimation` and `exitAnimation` if the component is visible in the viewport by using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). If `true` container element will always be in the DOM\nlazyOptions | IntersectionOptions | `undefined` | [Intersection Observer options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)\nonEnterFinished | () =\u003e void | `undefined` | Callback when `enterAnimation` finishes\nonExitFinished | () =\u003e void | `undefined` | Callback when `exitAnimation` finishes\nstyle | React.CSSProperties | `undefined` | Inline styles to set in the container element\n\n## Examples\n\nClone the repo first and then:\n```\nnpm install\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgpedro%2Freact-component-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgpedro%2Freact-component-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgpedro%2Freact-component-transition/lists"}