{"id":20997596,"url":"https://github.com/setsun/react-transition-components","last_synced_at":"2025-05-14T23:30:51.767Z","repository":{"id":34296545,"uuid":"81271386","full_name":"setsun/react-transition-components","owner":"setsun","description":"Easily configurable React components for animations / transitions 💃 ","archived":false,"fork":false,"pushed_at":"2024-02-21T01:01:38.000Z","size":2982,"stargazers_count":19,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-06T04:02:50.432Z","etag":null,"topics":["animation","component-library","css-in-js","react","react-transition-group"],"latest_commit_sha":null,"homepage":"https://setsun.github.io/react-transition-components","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/setsun.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":"2017-02-08T00:58:45.000Z","updated_at":"2024-11-01T11:07:12.000Z","dependencies_parsed_at":"2023-11-24T22:23:38.249Z","dependency_job_id":"96ed3293-cf11-489b-9346-370f5d349b1d","html_url":"https://github.com/setsun/react-transition-components","commit_stats":{"total_commits":157,"total_committers":7,"mean_commits":"22.428571428571427","dds":"0.21019108280254772","last_synced_commit":"b2da86e5e5acf329606f10e48f581b3aafc351f9"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setsun%2Freact-transition-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setsun%2Freact-transition-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setsun%2Freact-transition-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setsun%2Freact-transition-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/setsun","download_url":"https://codeload.github.com/setsun/react-transition-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254247995,"owners_count":22038940,"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","component-library","css-in-js","react","react-transition-group"],"created_at":"2024-11-19T07:40:53.681Z","updated_at":"2025-05-14T23:30:46.737Z","avatar_url":"https://github.com/setsun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Transition Components\n[![npm version](https://badge.fury.io/js/react-transition-components.svg)](https://badge.fury.io/js/react-transition-components)\n[![npm-downloads](https://img.shields.io/npm/dm/react-transition-components.svg)](https://www.npmjs.com/package/react-transition-components)\n\nAn animation component library \u0026 higher-order component for generating easily configurable `\u003cTransition\u003e` components from `react-transition-group`.\n\n`react-transition-components` is 3 kB gzipped, has peer dependencies on `react` and `react-transition-group`, and supports `webpack` tree-shaking by default: https://bundlephobia.com/result?p=react-transition-components\n\n```\nyarn install react-transition-components\n```\n\n## Motivation\n\n`react-transition-components` has 2 goals:\n- Provide a component library of common lightweight UI transitions that are configurable on durations, delays, easings, and other animation values.\n- Make it easy to create configurable transition components by providing a `createTransition` higher-order component.\n\nThe aforementioned `createTransition` higher-order component wraps `\u003cTransition\u003e` from `react-transition-group`, maintains backwards compatibility with its props, and enhances it with configurable timings, delays, and easings. It provides a concise API, allowing you to express an enter/exit CSS transition in **6** lines of code in the simplest case:\n\n```jsx\nimport { createTransition } from 'react-transition-components';\n\nconst CustomTransition = createTransition({\n  from: { transform: 'scale(0) skew(45deg)', opacity: 0 },\n  enter: { transform: 'scale(1) skew(0deg)', opacity: 1 }\n});\n```\n\n## Component Library\n`react-transition-components` comes with multiple components that work out of the box. A Storybook is live at:  https://setsun.github.io/react-transition-components\n\nThe following components are included, and implement the most common CSS transitions:\n- FadeTransition for `opacity` animations\n- HeightTransition for `height` animations\n- TranslateTransition for `translate3d` animations\n- ScaleTransition for `scale3d` animations\n- RotateTransition for `rotate3d` animations\n- SkewTransition for `skew` animations\n- ClipTransition for `clip-path` animations\n\n## Higher-order component API\n### `createTransition(config: TransitionConfig)`\n\nThe `createTransition` higher-order component returns a pre-configured `\u003cTransition\u003e` component that allows you to create transition components that can be used immediately, and can be configured via `props` as your animation needs change.\n\nAll components created via `createTransition` support all props from the `\u003cTransition\u003e` component from `react-transition-group` (https://reactcommunity.org/react-transition-group/transition).\n\nThese generated components also have extended functionality and have the following base props for customizing transition properties and timings:\n```ts\ntype Props = {\n  // a custom duration for your transition, with the ability\n  // to also have separate enter / exit durations\n  duration?: number | {\n    enter: number;\n    exit: number;\n  };\n\n  // a custom delay for your transition, with the ability\n  // to also have separate enter / exit delays\n  delay?: number | {\n    enter: number;\n    exit: number;\n  };\n\n  // a CSS transition easing curve\n  easing?: string;\n\n  // React children can either be a ReactNode, or a function that takes\n  // a style and status, and returns a ReactNode\n  children: React.ReactNode | ((style: React.CSSProperties, status: TransitionStatus) =\u003e React.ReactNode);\n}\n```\n\n`createTransition` has the following type signature:\n```ts\ntype TransitionConfig = {\n  from: React.CSSProperties | LazyCSSProperties;\n  enter: React.CSSProperties | LazyCSSProperties;\n  exit?: React.CSSProperties | LazyCSSProperties;\n  transitionProperty?: string;\n}\n\ntype createTransition = (config: TransitionConfig) =\u003e React.SFC\u003cTransitionProps\u003e\n```\n\n#### `from: React.CSSProperties | LazyCSSProperties`\nThe `from` property is the starting style of your transition component. This is the first state that your component animation will animate from. If the `exit` property is not specified, the `from` property is also used for the exit animation.\n\n#### `enter: React.CSSProperties | LazyCSSProperties`\nThe `enter` property is the entering style of your transition component. This is the state where your component animation will animate to, and its final resting state.\n\n#### `exit?: React.CSSProperties | LazyCSSProperties`\nThe `exit` property is the exiting style of your transition component. This is an optional property for explicitly specifying a state to animate to when exiting, especially if you want an `exit` animation that is asymmetric from your `enter` animation.\n\n### Example Recipes\n\n#### Symmetric Enter/Exit Transition\n```jsx\nconst FadeTransition = createTransition({\n  from: { opacity: 0 },\n  enter: { opacity: 1 }\n});\n```\n\n#### Asymmetric Enter/Exit Transition\n```jsx\nconst ScaleEnterClipExitTransition = createTransition({\n  from: {\n    transform: 'scale(0.5)',\n    opacity: 0,\n    clipPath: 'circle(100% at 50% 50%)'\n  },\n  enter: {\n    transform: 'scale(1)',\n    opacity: 1,\n    clipPath: 'circle(100% at 50% 50%)'\n  },\n  exit: {\n    transform: 'scale(1)',\n    opacity: 0,\n    clipPath: 'circle(0% at 50% 50%)'\n  },\n});\n```\n\n#### Configurable Transition\n```jsx\nconst ClipScaleFadeTransition = createTransition({\n  from: (props) =\u003e {\n    return {\n      opacity: props.fade ? 0 : 1,\n      transform: `scale(${props.scale.start})`,\n      clipPath: 'circle(100% at 50% 50%)'\n    }\n  },\n  enter: (props) =\u003e {\n    return {\n      opacity: 1,\n      transform: `scale(${props.scale.end})`\n      clipPath: 'circle(100% at 50% 50%)'\n    }\n  },\n  exit: (props) =\u003e {\n    return {\n      opacity: props.fade ? 0 : 1,\n      transform: `scale(${props.scale.start})`,\n      clipPath: 'circle(0% at 50% 50%)'\n    }\n  },\n});\n\nClipScaleFadeTransition.defaultProps = {\n  fade: true,\n  scale: {\n    start: 0.5,\n    end: 1,\n  }\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetsun%2Freact-transition-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsetsun%2Freact-transition-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetsun%2Freact-transition-components/lists"}