javierbyte/react-number-easing

React component to interpolate rendering of numbers in the frontend.

React Number Easing

React component for fancy number transitions.

› Online Demo.

Installation

npm install react-number-easing --save

Usage.

import NumberEasing from 'react-number-easing';

<NumberEasing
  value={15}
  speed={300}
  decimals={0}
  ease='quintInOut' />

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.
• [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.

react-number-easing's Issues

Unknown prop `ease` on <span> tag

It seems that React is causing an unknown prop error in the console because of the prop ease being passed to span DOM element.

The fix is explained here https://facebook.github.io/react/warnings/unknown-prop.html and it is pretty simple. You need to avoid passing ease to span as a prop.

Thanks,

Request: Add ts definitions

If you have a lot of console.logs and the console open, the number can jump to crazy values

Debugging with:

var currentDisplayValue = Math.round((value - this.state.previousValue) * progress + this.state.previousValue);
console.log('updateNumber', this.props.value, currentDisplayValue, progress, elapsedTime, this.state.previousValue);

and

if (className) classes += ' ' + className;
console.log(displayValue, this.props, this.state);

[Feature Request] Separators

Add separators 120,000 .

No release for the latest PR

Continued support

Despite this widget being broken in the latest versions of React, it looks like there is still a small but present need for this tool to be maintained among some. Any chance you might think about adding some maintainers for this, if you're too busy? Happy to chip in myself.

Going to different tab in Chrome causes numbers to be way off

For whatever reason, in Google Chrome, when you switch to a different tab and let the numbers update, and then go back to the original tab, it causes the numbers to be way off. This seems related to #3

Feature: possibility to have a different format when target is reached

Hello,

Transitioning tons of decimals is not that great for us but we still would like to show them when the transition has finished. So ideally I'd like to have 0 decimals during transitions then final value has some. What do you think?

Thanks for the component by the way : )

Accessing PropTypes via the main React package is deprecated

Hello,

PropTypes has been moved to a separate package. Accessing it via React.PropTypes triggers a warning in DevConsole.

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes
There's a codemode to automate the transition.

Thanks!

class NumberEasing extends React.Component - refactoring

I have ported it to be compatible with React 16+

example
https://github.com/kunukn/react-number-easing/blob/master/src/components/NumberEasing.jsx