JSPM

che-react-number-easing

0.0.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15
  • Score
    100M100P100Q51980F
  • License ISC

React component for fancy transition for numbers.

Package Exports

  • che-react-number-easing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (che-react-number-easing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Number Easing

React component for fancy number transitions.

Live demo

react-number-easing screenshot

Installation

npm i -S che-react-number-easing

Usage.

import NumberEasing from 'react-number-easing';

<NumberEasing
  ease="quintInOut"
  precision={2}
  speed={300}
  useLocaleString={true}
  value={15}
/>

Props

  • [ease]: The easing equation for the animation. Default: quintInOut (You can choose from mattdesl/eases.)
  • [precision]: How many decimal places you want to show? Default: 2
  • [speed]: How fast do you want to finish the animation? Default:500ms
  • [useLocaleString]: Use number formatting based on locale? Default: false
  • [value]: The value that you want to display at the end of the animation.

Build

If you want to build this from source, you will need babel and less.

npm i -g babel less

And run the pre publish script

npm run prepare