NumberFlow

NumberFlow provides framework-specific packages for React, Vue, Svelte, and Vanilla JavaScript. It automatically transitions when the value prop changes.

// React
import NumberFlow from '@number-flow/react'
function Example() {
	return <NumberFlow value={123} />
}

<!-- Vue -->
<script setup>
import NumberFlow from '@number-flow/vue'
</script>
<template>
	<NumberFlow :value="123" />
</template>

<!-- Svelte -->
<script>
import NumberFlow from '@number-flow/svelte'
</script>
<NumberFlow value={123} />

<!-- Vanilla JS -->
<number-flow></number-flow>

<script type="module">
	import 'number-flow'
	const flow = document.querySelector('number-flow')
	flow.update(123)
</script>

For SSR (like Astro), use renderInnerHTML to generate the initial HTML. Ensure you pass the same locales, format, and nonce to both the renderer and the client-side hydration.

---
import { renderInnerHTML } from 'number-flow'
---
<number-flow
	nonce="..."
	set:html={renderInnerHTML(123, {
		locales: 'en-US',
		format: { notation: 'compact' },
		nonce: '...'
	})}
/>

<script>
	import 'number-flow'
	const flow = document.querySelector('number-flow')
	flow.locales = 'en-US'
	flow.format = { notation: 'compact' }
	flow.update(123)
</script>

You can add custom strings before or after the number using numberPrefix (vanilla) or prefix/suffix (frameworks).

<NumberFlow
	value={value}
	format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
	suffix="/mo"
/>

// Vanilla JS
flow.numberPrefix = "$"
flow.numberSuffix = "/mo"