A React component for easing props values
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
src
stories
.babelrc
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

react prop transition

npm version

A component for easing props values


Heavily inspired by React Motion. The <Transition> component will proxy props to a single functional child. When Transition receives new props it will interpolate values on each animation frame until complete or interrupted.

The props object can be any object permitted by d3.interpolateObject. In practice this allows for transitions of numbers, arrays, colors (as understood by CSS) and much more.

Getting started

Install react-prop-transition using npm.

npm install react-prop-transition --save

Usage

import Transition from 'react-prop-transition';

<Transition props={{number: 0}}
            duration={400}
            easing="cubic" >
  {(props) => <span>{props.number}</span>}
</Transition>

Api

Props Description
props The props object to be eased. Permitted values can be numbers, colors, arrays, dates and strings with a numerical element. #d3.interpolateObject
easing (optional) Specifies the easing function as a string. Permitted options
duration (optional) The easing duration in ms