# Number flow: Interruptions and events

> A new value mid-spin continues from where each digit is, so rapid updates never jump. `onAnimationsStart` and `onAnimationsFinish` fire once per batch of digits.

Example: https://hextaui.com/docs/number-flow/examples/events
Component docs: https://hextaui.com/docs/number-flow.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/number-flow-events.json
```

This adds `components/examples/number-flow/events.tsx` with the Number flow component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/number-flow/events.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { NumberFlow } from "@/components/ui/number-flow"

export function NumberFlowEvents() {
  const [value, setValue] = React.useState(1200)
  const [status, setStatus] = React.useState("Idle")
  const timers = React.useRef<number[]>([])

  React.useEffect(() => {
    const pending = timers.current
    return () => pending.forEach((id) => window.clearTimeout(id))
  }, [])

  function burst() {
    timers.current.forEach((id) => window.clearTimeout(id))
    timers.current = Array.from({ length: 10 }, (_, index) =>
      window.setTimeout(
        () => setValue((current) => current + Math.ceil(Math.random() * 40)),
        index * 90
      )
    )
  }

  return (
    <div className="flex flex-col items-center gap-4">
      <NumberFlow
        value={value}
        onAnimationsStart={() => setStatus("Animating")}
        onAnimationsFinish={() => setStatus("Settled")}
        className="text-5xl font-semibold"
      />
      <span className="text-sm text-muted-foreground">{status}</span>
      <Button variant="outline" size="sm" onClick={burst}>
        Burst ×10
      </Button>
    </div>
  )
}
```

## Props in this example

### NumberFlow

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Required. |
| `onAnimationsStart` | `() => void` | – | Called when a batch of digits starts moving. |
| `onAnimationsFinish` | `() => void` | – | Called when the latest batch settles. Skipped if a newer value interrupts it. |

## More Number flow examples

- [Only changed digits move](https://hextaui.com/docs/number-flow/examples/changed-digits.md)
- [Trend](https://hextaui.com/docs/number-flow/examples/trend.md)
- [Formats](https://hextaui.com/docs/number-flow/examples/formats.md)
- [Timing](https://hextaui.com/docs/number-flow/examples/timing.md)
- [Inline and in badges](https://hextaui.com/docs/number-flow/examples/inline.md)
- [Right to left](https://hextaui.com/docs/number-flow/examples/rtl.md)