{"id":13817452,"url":"https://github.com/cheapsteak/react-transition-group-plus","last_synced_at":"2025-04-04T21:09:40.319Z","repository":{"id":57346663,"uuid":"50496250","full_name":"cheapsteak/react-transition-group-plus","owner":"cheapsteak","description":"A more full-featured transition group for React","archived":false,"fork":false,"pushed_at":"2021-12-02T11:14:50.000Z","size":489,"stargazers_count":269,"open_issues_count":8,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-16T07:27:21.091Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheapsteak.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}},"created_at":"2016-01-27T09:25:07.000Z","updated_at":"2024-04-06T15:59:58.000Z","dependencies_parsed_at":"2022-08-25T19:02:45.409Z","dependency_job_id":null,"html_url":"https://github.com/cheapsteak/react-transition-group-plus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapsteak%2Freact-transition-group-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapsteak%2Freact-transition-group-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapsteak%2Freact-transition-group-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapsteak%2Freact-transition-group-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheapsteak","download_url":"https://codeload.github.com/cheapsteak/react-transition-group-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249532,"owners_count":20908212,"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":[],"created_at":"2024-08-04T06:00:44.223Z","updated_at":"2025-04-04T21:09:40.295Z","avatar_url":"https://github.com/cheapsteak.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React TransitionGroupPlus  \n\n[![npm](https://img.shields.io/npm/v/react-transition-group-plus.svg)](https://www.npmjs.com/package/react-transition-group-plus)  [![npm](https://img.shields.io/npm/dt/react-transition-group-plus.svg)](https://npmcharts.com/compare/react-transition-group-plus?minimal=true)\n\nA drop-in replacement for the original react-addons-transition-group that allows interruptible transitions and specifying transition order. \n\n**Note that this is not API-compatible with react-transition-group v2**\n\n### Installation\n\n```\nnpm install --save react-transition-group-plus\n```\n\n### Demo\nSee a **[comparative demo](http://cheapsteak.github.com/react-transition-group-plus/)** between ReactTransitionGroup and TransitionGroupPlus\n\nAside from being able to specify transition order, notice how a component's enter transition is aborted and the leave transition runs as soon as a component should no longer be active.  \n\n### Why?\n\nReactTransitionGroup has a few shortcomings  \n\n- **Animation order can't be specified.**   \n  Different components' `componentWillEnter` and `componentWillLeave` always occur simultaneously.  \n  It's difficult to wait for the outgoing component's `componentWillLeave` to finish before running the incoming component's `componentWillEnter`. \n\n- **The same component's transitions can't be interrupted**.  \n  Once a component's `componentWillEnter` is called, calls to the same component's `componentWillLeave` will be delayed until the enter animation finishes   \n  This problem becomes apparent for page transitions and carousels, when something that's entering might need to immediately exit.  \n\nTransitionGroupPlus builds upon ReactTransitionGroup's existing code to solve these problems.  \n\n\n### Usage \n\nUsage of TransitionGroupPlus is nearly identical to ReactTransitionGroup. (See the [guide on react's website](https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup) on how to use ReactTransitionGroup)  \n\nAdditional props: \n\n- **`transitionMode`** (optional) \n  can have the following values:  \n  - `simultaneous` _(default)_  \n    `componentWillEnter` and `componentWillLeave` will be run at the same time.  \n    The `transitionMode` prop can be omitted if simultaneous transitions are desired as this is the default value.  \n  - `out-in`  \n    Wait for the outgoing component's `componentWillLeave` to finish before calling the incoming component's `componentWillEnter`.  \n    Note:  \n    If an incoming component needs to leave while it's still waiting for its `componentWillEnter` to be called, its `componentWillEnter` will be skipped and only its `componentWillLeave` will be called.\n  - `in-out`  \n    Wait for the incoming component's `componentWillEnter` to finish before calling the outgoing component's `componentWillLeave`.\n- **`deferLeavingComponentRemoval`** (optional, boolean, defaults to `false`)  \n  When `true`, children that leave will not be removed immediately after their `componentWillLeave` is called, but will wait for the next component's `componentWillEnter` to finish.  \n  Only affects the transition modes \"simultaneous\" and \"out-in\". Has no effect on \"in-out\".  \n\n##### sample:\n```js\n\u003cTransitionGroupPlus transitionMode=\"in-out\"\u003e\n  ...\n\u003c/TransitionGroupPlus\u003e\n```\n\n### Browser Support\n\nThis component relies on Promises, which exists natively in most browsers, but a polyfill would be required for IE11 and below.\n\nOther than that, this should run on all browsers where React runs.\n\n### License\n\nSince this code was forked from React's ReactTransitionGroup, significant lines of codes still fall under React's original BSD license.  \n\nNew code is licensed under MIT\n\n\nInspired by [Vue's transitions](http://vuejs.org/guide/transitions.html#JavaScript_Transitions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheapsteak%2Freact-transition-group-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheapsteak%2Freact-transition-group-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheapsteak%2Freact-transition-group-plus/lists"}