# NumberValue

> Number that counts up to `value`, formatted with Intl.

Source: https://ui.jcsoftdev.com/docs/components/number-value

Number that counts up to `value`, formatted with Intl. Assistive tech reads the final
value at once; the animated text is hidden from it so it is not announced digit by digit.

## Import

```ts
import { NumberValue } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/number-value`.

## Usage

```tsx
<NumberValue
  value={12840}
  duration={900}
  format={{ style: "currency", currency: "PEN" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `number` |  |  |
| `format` | `NumberFormatConfig` |  | Intl options plus `locale`, e.g. `{ style: "currency", currency: "PEN" }`. |
| `duration` | `number` | `900` | Animation length in ms. No animation under `prefers-reduced-motion`. |
| `from` | `number` | `0` | Count up from this value on first render. |
| `animateOnMount` | `boolean` | `true` | When false, only later changes of `value` animate. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-numbervalue--default)
- [Percent](/storybook/?path=/story/atoms-numbervalue--percent)
- [Compact](/storybook/?path=/story/atoms-numbervalue--compact)
- [Updating](/storybook/?path=/story/atoms-numbervalue--updating)
- [Narrow](/storybook/?path=/story/atoms-numbervalue--narrow)
- [Brutal Preset](/storybook/?path=/story/atoms-numbervalue--brutal-preset)

## Source

`packages/ui/src/atoms/number-value/number-value.tsx`