https://github.com/imranolas/react-prop-transition

A React component for easing props values
https://github.com/imranolas/react-prop-transition

easing-props-values props react transition

Last synced: 4 months ago
JSON representation

A React component for easing props values

• Host: GitHub
• URL: https://github.com/imranolas/react-prop-transition
• Owner: imranolas
• License: mit
• Created: 2017-02-18T14:49:08.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T22:16:56.000Z (about 2 years ago)
• Last Synced: 2024-10-14T06:52:48.374Z (4 months ago)
• Topics: easing-props-values, props, react, transition
• Language: JavaScript
• Homepage:
• Size: 327 KB
• Stars: 58
• Watchers: 3
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-render-props - react-prop-transition
• awesome-react-render-props - react-prop-transition

README

        
react prop transition




  

    

  

  

    

  





  A component for easing props values









***

Heavily inspired by React Motion. The `` 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`](https://github.com/d3/d3-interpolate#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

```js

import Transition from 'react-prop-transition';

  {(props) => {props.number}}

```

## 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](https://github.com/d3/d3-interpolate#interpolateObject)  |

| `easing` (optional) | Specifies the easing function as a string. [_Permitted options_](https://github.com/imranolas/react-prop-transition/blob/master/src/easing.js) |

| `duration` (optional) | The easing duration in ms |