number-flow

NumberFlow: Animated Number Component for React

NumberFlow is a specialized React component designed to bring numbers to life through smooth animations and versatile formatting. It allows developers to easily implement dynamic numerical displays that transition elegantly when values change. With a focus on accessibility and customization, NumberFlow offers fine-tuned control over animation timings, visual presentation, and internationalization, making it a powerful tool for enhancing user interfaces with engaging numerical data representations without external dependencies.

Features:

• Intl.NumberFormatOptions Support: Enables number formatting using the standard Intl.NumberFormatOptions.
• Locale Customization: Allows specifying Intl.LocalesArgument for locale-specific number rendering.
• Custom Prefix & Suffix: Supports adding custom string prefixes or suffixes to the displayed number.
• Granular Animation Timings: Provides transformTiming, spinTiming, and opacityTiming props for detailed control over animation durations and easing functions.
• Animation Trend Direction: Offers a trend prop to control digit animation direction (up, down, or mixed based on value change).
• Isolated Layout Transitions: An isolate prop ensures animations are unaffected by concurrent layout shifts elsewhere on the page.
• Global Animation Toggle: A boolean animated prop to easily enable or disable all animations.
• Positional Digit Behavior: The digits prop allows configuring specific behaviors for digits based on their position (e.g., for clocks or counters).
• Reduced Motion Adherence: Respects user's prefers-reduced-motion setting by default, with an option to override.
• Extensible Plugin System: Supports plugins, such as the continuous plugin for smooth pass-through number transitions.
• will-change Performance Hint: An optional willChange prop to apply the will-change CSS property for potential performance gains during frequent updates.
• Animation Lifecycle Callbacks: Provides onAnimationsStart and onAnimationsFinish custom events to hook into animation states.
• Styling via CSS Shadow Parts: Exposes CSS Shadow Parts (e.g., ::part(digit)) for fine-grained component styling.
• Synchronized Group Animations: The <NumberFlowGroup> component ensures synchronized transitions for multiple NumberFlow instances.
• useCanAnimate Utility Hook: A hook to programmatically determine if animations are feasible based on browser capabilities and user preferences.

Summary:

NumberFlow empowers React developers to create engaging user interfaces by animating numerical data with smooth transitions and flexible formatting. This dependency-free component offers deep customization over animation behavior, styling, and internationalization. Features like grouped animations, a plugin architecture, and accessibility considerations make it a comprehensive solution for dynamic number displays.