https://github.com/javierbyte/react-number-easing

React component to interpolate rendering of numbers in the frontend.
https://github.com/javierbyte/react-number-easing

animation design-tool easing frontend react react-number-easing transition

Last synced: 5 days ago
JSON representation

React component to interpolate rendering of numbers in the frontend.

• Host: GitHub
• URL: https://github.com/javierbyte/react-number-easing
• Owner: javierbyte
• License: bsd-3-clause
• Created: 2015-05-09T09:03:21.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-01-29T13:08:28.000Z (12 months ago)
• Last Synced: 2024-12-30T12:07:07.875Z (12 days ago)
• Topics: animation, design-tool, easing, frontend, react, react-number-easing, transition
• Language: JavaScript
• Homepage: https://javier.xyz/react-number-easing/
• Size: 2.45 MB
• Stars: 156
• Watchers: 7
• Forks: 23
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [React Number Easing](https://javier.xyz/react-number-easing/)

React component for fancy number transitions.

[› Online Demo](https://javier.xyz/react-number-easing/).

[![react-number-easing screenshot](assets/number-easing-infinite.gif)](https://javier.xyz/react-number-easing/)

## Installation

```js

npm install react-number-easing --save

```

## Usage.

```jsx

import NumberEasing from 'react-number-easing';

```

### Props

* `value`: The value that you want to display at the end of the animation. This is the target value.

* `[speed]`: How fast do you want to finish the animation? Defaults to 500ms.

* `[ease]`: The easing equation for the animation. Defaults to `quintInOut`. You can choose from [mattdesl/eases](https://github.com/mattdesl/eases/blob/master/index.js).

* `[decimals]`: Number of decimal numbers to show.

* `[customFunctionRender]`: Function that replaces the default `Number(value).toString(decimals)` render function. It takes one argument `currentRenderValue` which is a `Float` with the current eased value to render and should return a `string`.