react-animation-primitive

    1.1.0 • Public • Published

    react-animation-primitive Build Status

    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

    Install

    npm i react-animation-primitive

    DownloadsWeekly Downloads

    111

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    15.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • andytjoslin