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

transition-group

v0.0.2

Published

like `<ReactTransitionGroup />` + callbacks, extras and child-specific customization

Downloads

145

Readme

TransitionGroup

TransitionGroup is a sound answer to <ReactTransitionGroup /> and any wishlist you might have had for it. We suggest you become familiar with it and its higher level CSS-oriented counterpart first to truly understand TransitionGroups's benefits:

The biggest problem TransitionGroup solves is that you can both provide callbacks for the 3 transitions (appear, enter, leave) AND have your css classes applied. ReactCSSTransitionGroup does not allow for callbacks.

However, we've taken it one step farther to allow you to customize each individual child component rendered within the group. So that means you can provide props (such as animation duration, delay, etc) that apply to all children by setting them at the group level, OR you can override them by passing the props to the <Transition /> components that wrap your actual children.

Note: unlike ReactTransitionGroup and ReactCSSTransitionGroup all child components are required to be wrapped in <Transition>.

Lastly, we offer simpler prop names and a lot more customization:

  • duration (duration, appearDuration, enterDuration, leaveDuration)
  • delay (delay, appearDelay, enterDelay, leaveDelay)
  • class names (the appear, enter, and leave props)
  • a prefix (prepended to all classes)

Installation

yarn add animated-transition-group

Usage

import React from 'react'
import { connect } from 'react-redux'
import { TransitionGroup, Transition } from 'animated-transition-group'

const onLeave = () => console.log('left')
const onEmpty = () => console.log('group empty')

const PageSwitcher = ({ page }) =>
  <TransitionGroup 
    component='div'
    className='whatever'
    duration={300}
    delay={100}
    prefix='fade'
    onEmpty={onEmpty}
  >
    <Transition key={page} duration={500} enterDelay={500} leaveDelay={0} onLeave={onLeave}>
      {getComponent(page)}
    </Transition>

    // don't show link for the current page:
    <LinkRow>
      {page !== 'Home' && <Transition key={`${page}-link`>HOME<Transition>}
      {page !== 'List' && <Transition key={`${page}-link`>LIST<Transition>}
      {page !== 'Video' && <Transition key={`${page}-link`>VIDEO<Transition>}
    </LinkRow>
  </TransitionGroup>

const getComponent = page => {
  switch(page) {
    case 'Home':  
      return <Home />
    case 'List':  
      return <List />
    case 'Video':  
      return <Video />
  }
}

const mapState = ({ page }) => ({ page })
export default connect(mapState)(PageSwitcher)

note: you can have as many nested <Transition />'s as you want. This happens to be primarily for one child :)

The secret ingredient is obviously the key property passed to your children. That lets React differentiate between the components. More importantly it lets you define just a single component in this case, rather than require you to hack something together that has 2 components nested in the code at once. React just knows what to do.

The ReactTransitionGroup toolset hasn't received enough credit in my opinion--partly because the flaws our component here solves--but we believe the abstraction it provides to use state to determine when components should and should not be there (as you normally would), while keeping the concept of the actual duration embedded in the DOM separate, makes it world class. It allows you to render from state, just as you would hope...and without any hacked solutions or trickery.

As for having multiple nested Transition components, of course also use the key prop to uniquely identify them so React knows what to do, i.e. when to attach and detach them to/from the DOM.

API

The below props can be applied to both <TransitionGroup /> and <Transition />. The difference is that if you provide them to TransitionGroup, they will be passed down to Transition. And of course, if Transition supplies its own, it will override it. duh!

prefix: string

the string prepended to all classes like this: myPrefix-appear, myPrefix-appear-active, myPrefix-enter, etc

duration: number

the time in milliseconds that child components are expected to animate for

delay: number

the time in milliseconds that child components are supposed to wait before being animated. Instances won't be removed from the DOM until the sum of the delay and duration has been reached.

enterDuration: number

leaveDuration: number

appearDuration: number

by supplying these, you can customize the duration length (in ms) of the individual transition

enterDelay: number

leaveDelay: number

appearDelay: number

by supplying these, you can customize the delay length (in ms) of the individual transition

onAppear: Function

onEnter: Function

onLeave: Function

these callbacks will of course be called for the given transition

onBeforeAppear: Function

onBeforeEnter: Function

onBeforeLeave: Function

these callbacks will of course be called before their respective transition happens

appear: string

enter: string

leave: string

by suppling these you can override the classes applied, e.g: leave-active can be foobar-active. These are also very effective if you're using CSS Modules and don't want to define a global class with :global(.appear). Instead, do this:

import styles from '.styles'
<Transition appear={styles.appear} />

TransitionGroup only:

The following props are only available on <TransitionGroup />:

onFull: Function

called when the first Transition renders within TransitionGroup

onEmpty: Function

called when there are no nested <Transition /> components. It is called after the final component animates its departure, using the the duration and delay passed to TransitionGroup (not the child) to calculate that time.

zeroElements: number

to calculate whether there are zero nested children, sometimes you need to indicate what that number is. For example, if you have an array of children, when the array is empty, it's counted as 1 even though no children are rendered. So you set zeroElements={1}.