Number-flow is a lightweight, cross-framework component that enables you to transition, format, and localize numbers in your web applications. Compatible with Svelte, React, and Vue.
This component handles the intricate details of number formatting and localization. You can define how numbers appear, including the locale, currency, and animation timings. Use it for displaying financial data, statistical updates, counters, or any dynamic numerical content where smooth transitions improve user engagement.
Features
🌍 Localization Support: Uses the Intl.NumberFormat API for locale-aware number formatting.
⏱️ Fine-grained Animation Control: Adjust animation duration, easing, and direction for a polished look.
♿ Accessibility: Designed with accessibility in mind, respecting user preferences for reduced motion.
🎨 Customizable Formatting: Control the appearance of numbers with options for currency, styling, and custom prefixes/suffixes.
🎚️ Trend Indication: Specify whether numbers should trend upwards, downwards, or dynamically based on value changes.
Installation
You can install Number-flow using your preferred package manager:
For Svelte:
npm install @number-flow/svelteFor React:
npm install @number-flow/reactFor Vue:
npm install @number-flow/vueUsage
Svelte:
<NumberFlow value={12345} />React:
import NumberFlow from '@number-flow/react'
<NumberFlow value={12345} />Vue:
<script setup>
import NumberFlow from '@number-flow/vue'
</script>
<template>
<NumberFlow :value="12345" />
</template>Related Resources
- Intl.NumberFormat MDN Documentation: Learn more about number formatting standards in JavaScript
- Easing Functions Generator: Explore advanced animation timing and easing techniques
- Web Animation API: Understand core web animation principles
Preview
