rne

react-number-easing

React component for fancy number transitions.

Showing:

Popularity

Downloads/wk

220

GitHub Stars

133

Maintenance

Last Commit

1mo ago

Contributors

4

Package

Dependencies

1

Size (min+gzip)

1.2KB

License

BSD-3-Clause

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Number Easing

React component for fancy number transitions.

› Online Demo.

react-number-easing screenshot

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100