React Number Easing

React component for animated number transitions. It supports React 17, 18, and 19, TypeScript, server rendering, and the Next.js App Router.

› Online demo

Installation

pnpm add react-number-easing

The package also works with npm, Yarn, and Bun.

Usage

import NumberEasing from 'react-number-easing';

export default function Total({ value }) {
  return (
    <NumberEasing
      value={value}
      speed={300}
      decimals={0}
      ease="quintInOut"
    />
  );
}

The initial render displays the target value. Later value changes animate from the currently rendered value to the new target.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | number | required | Target value displayed at the end of the animation. | | speed | number | 500 | Animation duration in milliseconds. | | ease | EaseName | 'quintInOut' | Easing equation from eases. | | decimals | number | 0 | Decimal places passed to Number(value).toFixed(decimals). | | customFunctionRender | (value, decimals) => ReactNode | default formatter | Replaces the default text formatter. |

All easing names and the component props are exported as TypeScript types:

import NumberEasing, {
  type EaseName,
  type NumberEasingProps,
} from 'react-number-easing';

const ease: EaseName = 'cubicOut';

const props: NumberEasingProps = {
  value: 1200,
  decimals: 2,
  ease,
  customFunctionRender: (value, decimals) => (
    <strong>{value.toLocaleString(undefined, {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals,
    })}</strong>
  ),
};

export default function Total() {
  return <NumberEasing {...props} />;
}

TEaseTypes remains available as an alias-compatible legacy type name.

Next.js App Router

The package declares its own client boundary, so a Server Component can render it directly when its props are serializable:

import NumberEasing from 'react-number-easing';

export default function Page() {
  return <NumberEasing value={42} decimals={0} />;
}

customFunctionRender is a function and therefore cannot cross a server-to-client boundary. Put that usage in your own Client Component:

'use client';

import NumberEasing from 'react-number-easing';

export default function FormattedTotal({ value }: { value: number }) {
  return (
    <NumberEasing
      value={value}
      decimals={2}
      customFunctionRender={(current, decimals) => (
        <strong>{current.toFixed(decimals)}</strong>
      )}
    />
  );
}

Effects run only in the browser. Server rendering and the client's first render both display the same formatted target value, so hydration starts from matching text.

Compatibility

• React and React DOM 17 through 19
• Next.js App Router and other React server-rendering frameworks
• TypeScript declarations for Node, Node16/NodeNext, and bundler resolution
• The historical default export and react-number-easing/src/index.js path

The v1 scheduler intentionally remains interval-based for compatibility. Animation-driver changes, reduced-motion defaults, stricter runtime validation, and modern export-map encapsulation are deferred to v2.