JSPM

che-react-number-easing

0.1.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15
  • Score
    100M100P100Q51998F
  • 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.

const NumberEasing = require('che-react-number-easing');

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

Props

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

Build

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

npm install

And run the pre publish script

npm run prepare