React Number Easing

React component for fancy number transitions.

Live demo

Installation

npm i -S che-react-number-easing

Accessibility

NumberEasing uses the semantic <output aria-live="polite"> element to display animated numbers. This ensures that screen readers announce changes to the value automatically.

You can pass custom ARIA attributes (e.g., aria-label) to further improve accessibility for your use case:

<NumberEasing value={1234} aria-label="Total sales" />

Usage

import { NumberEasing } from "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

Requirements

• React 18 or newer

Build

To build from source:

npm install
npm run build

Test

To run tests:

npm test

Project Structure

• Main component: src/components/NumberEasing.jsx
• All components are exported from src/index.jsx