react-transition-array v1.0.2

React Transition Array

This component is a simple alternative for applying an array of style transitions in React.

Philosophy

ReactCSSTransitionGroup (https://facebook.github.io/react/docs/animation.html) and ReactInlineTransitionGroup (https://github.com/felipethome/react-inline-transition-group) seemed like the only options to render transitions using React. Now, both these appear to be limited in terms of how many transitions you can squeeze into appear/enter and leave. It isn't intuitive how one would go about supplying an array of more than two transitions to be applied to a component sequentially. That's where React Transition Array comes to the rescue.

There's no appear/enter/leave constraint. This component works off an array of styles that are applied sequentially. The first is equivalent to appear/enter and the last is leave. If there's just one style element in the array, apear/enter/leave are rolled into one. Optionally, we can unmount all child components after the last transition style is applied.

Demo

How to install

    npm install react-transition-array

How it works

Dynamically build styles object as an array of transitions, and pass it as a property using the key of the corresponding React element passed as a child element to link the style:

import Transition from 'react-transition-array'

let styles = {
  base: {
    position: 'absolute',
    top: '100px',
    left: '100px',
    borderRadius: '50%',
    border: '2px solid #B2FF59',
    height: '100px',
    width: '100px',
    opacity: '0.5',
  },
  transitionArray: [
    {
      transition: 'all 600ms ease-in',
      opacity: '0.75',
    },
    {
      transition: 'all 600ms ease-in',
      opacity: '1',
      top: '75px',
      left: '75px',
      border: '2px solid #80CBC4',
      height: '150px',
      width: '150px',
    },
    {
      transition: 'all 600ms ease-in',
      opacity: '1',
      top: '50px',
      left: '50px',
      border: '2px solid #26A69A',
      height: '200px',
      width: '200px',
    },
    {
      border: '2px solid #004D40',
      transition: 'all 600ms ease-in',
      opacity: '0',
    }
  ]
}

...

render() {
  let keyTmp = 'xmplky'
  let transitionStyles = {}
  transitionStyles[keyTmp] =  styles

  return (
    <Transition transitionStyles={transitionStyles} keepAllAlive={false}>
      <div key={keyTmp} />
    </Transition>
  )
}

Properties

LICENSE

MIT © Thomas Varghese