npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-transition-group-plus

v0.5.3

Published

More full featured transition group for react

Downloads

4,413

Readme

React TransitionGroupPlus

npm npm

A drop-in replacement for the original react-addons-transition-group that allows interruptible transitions and specifying transition order.

Note that this is not API-compatible with react-transition-group v2

Installation

npm install --save react-transition-group-plus

Demo

See a comparative demo between ReactTransitionGroup and TransitionGroupPlus

Aside 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.

Why?

ReactTransitionGroup has a few shortcomings

  • Animation order can't be specified.
    Different components' componentWillEnter and componentWillLeave always occur simultaneously.
    It's difficult to wait for the outgoing component's componentWillLeave to finish before running the incoming component's componentWillEnter.

  • The same component's transitions can't be interrupted.
    Once a component's componentWillEnter is called, calls to the same component's componentWillLeave will be delayed until the enter animation finishes
    This problem becomes apparent for page transitions and carousels, when something that's entering might need to immediately exit.

TransitionGroupPlus builds upon ReactTransitionGroup's existing code to solve these problems.

Usage

Usage of TransitionGroupPlus is nearly identical to ReactTransitionGroup. (See the guide on react's website on how to use ReactTransitionGroup)

Additional props:

  • transitionMode (optional) can have the following values:
    • simultaneous (default)
      componentWillEnter and componentWillLeave will be run at the same time.
      The transitionMode prop can be omitted if simultaneous transitions are desired as this is the default value.
    • out-in
      Wait for the outgoing component's componentWillLeave to finish before calling the incoming component's componentWillEnter.
      Note:
      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.
    • in-out
      Wait for the incoming component's componentWillEnter to finish before calling the outgoing component's componentWillLeave.
  • deferLeavingComponentRemoval (optional, boolean, defaults to false)
    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.
    Only affects the transition modes "simultaneous" and "out-in". Has no effect on "in-out".
sample:
<TransitionGroupPlus transitionMode="in-out">
  ...
</TransitionGroupPlus>

Browser Support

This component relies on Promises, which exists natively in most browsers, but a polyfill would be required for IE11 and below.

Other than that, this should run on all browsers where React runs.

License

Since this code was forked from React's ReactTransitionGroup, significant lines of codes still fall under React's original BSD license.

New code is licensed under MIT

Inspired by Vue's transitions