The NumberFlow component provides smooth, animated number transitions with support for various formats including currency, percentage, and compact notation. Perfect for dynamic counters, prices, statistics, and any numeric data that changes over time.
Installation
Examples
Interactive Social Card
A demo of NumberFlow with social media interactions. Click the buttons to see smooth number transitions.
Usage
Basic Usage
import NumberFlow from '@number-flow/react'
export default function Example() {
return <NumberFlow value={123} />
}
Currency Format
<NumberFlow
value={1234.56}
format={{
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0
}}
transformTiming={{
duration: 500,
easing: 'ease-out'
}}
/>
Compact Notation
<NumberFlow
value={1234567}
format={{
notation: 'compact',
compactDisplay: 'short',
roundingMode: 'trunc'
}}
willChange
continuous
/>
Customization
Custom Animation Timing
<NumberFlow
value={value}
transformTiming={{
duration: 500,
easing: 'ease-out'
}}
spinTiming={{
duration: 750,
easing: 'linear(...)'
}}
/>
Custom Number Formatting
<NumberFlow
value={0.8567}
format={{
style: 'percent',
minimumFractionDigits: 1
}}
/>
Custom Trend Control
<NumberFlow
value={value}
trend={(oldValue, value) => {
// Return:
// 1: digits always go up
// 0: each digit goes up/down based on its change
// -1: digits always go down
return Math.sign(value - oldValue)
}}
/>
Notes
- Built with accessibility in mind
- Numbers are properly formatted for screen readers
- Animations respect
prefers-reduced-motion
- ARIA attributes are automatically applied
- Uses spring-based animations for smooth transitions
- Supports various number formats through Intl.NumberFormat
- Optimized for performance with
willChange
prop
Props
Prop | Type | Description | Default |
---|---|---|---|
value | number | The number to display and animate | Required |
format | Intl.NumberFormatOptions | Formatting options for the number | |
locales | string | string[] | The locale(s) for number formatting | undefined |
prefix | string | Text to display before the number | undefined |
suffix | string | Text to display after the number | undefined |
spinTiming | EffectTiming | Timing for digit spin animations | transformTiming |
willChange | boolean | Optimize for animations | false |
See the NumberFlow docs for a full list of props.
Credits
NumberFlow was created by Maxwell Barvian. The animations were inspired by Emil Kowalski's Animations on the Web course.