react-animation-primitive

Why?

You want a simple declarative animation container for an open / close, enter / leave element. Like a sidenav.

And you want it to weigh <3 kb.

Install

npm install --save react-animation-primitive

Example

<AnimationPrimitive
  phase={state.isOpen ? 'enter' : 'leave'}
  listenerProp={'onTransitionEnd'}
  render={({ getContainerProps, phase, phaseActive, phaseComplete }) =>
    <div
      {...getContainerProps({
        class: cx(style.drawer, {
          'hide': !phase || (phase === 'leave' && phaseComplete),
          'enter': phase === 'enter',
          'enter_active': phase === 'enter' && phaseActive,
          'leave': phase === 'leave',
          'leave_active': phase === 'leave' && phaseActive
        })
      })}
    >
      <div class='backdrop' onClick={() => this.setState({ isOpen: fase }) />
      <div class='sidenav'>
        Sidenav Contents
      </div>
    </div>
  } />

API

<AnimationPrimitive>

Props

phase

string | required

Must be either 'enter' or 'leave'.

When a phase is set, it will change the phase, call render, and wait for onTransitionEnd or onAnimationEnd (depending on listenerProp), then call render again.

listenerProp

string | default 'onTransitionEnd' | optional, one of 'onTransitionEnd' or 'onAnimationEnd'

Set whether phases change on transition or animation end events. Defaults to transition events.

render

function | required

<AnimationPrimitive render={() => <div />} />

The render prop function is called with the following object:

| property | category | type | description | |-------------------|-------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | phase | state | string | The current phase. Either 'enter' or 'leave'. | | phaseActive | state | boolean | Whether this phase is currently running. For example, true if phase was just set to 'enter' and transition is in progress. False when 'enter' transition finishes. | | phaseComplete | state | boolean | Whether a transition just finished. True if this state was active and is no longer active. | | getContainerProps | prop getter | function | Get the props to put on your container element which will be transitioning. Contains a transitionend/animationend event listener. |

License

MIT © Andrew Joslin