Number Value

Число с учётом локали: валюта, проценты, компактная запись и единицы. Pro · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add number-value

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { NumberValue } from 'valyro-ui-pro';

Prop	Type	Default
`value` *	`number`		The number; for `percent` a share of one (0.24 prints 24%).
`format`	`'number' \| 'currency' \| 'percent' \| 'compact'`	`'number'`	`number`, `currency`, `percent` or `compact` (12.8K; with `currency` it prints $12.8K).
`currency`	`string`		ISO 4217 code for `currency` and compact money (default USD).
`fractionDigits`	`number`		Fixed number of fraction digits; by default the format decides (2 for USD, 0 for JPY).
`signDisplay`	`Intl.NumberFormatOptions['signDisplay']`		`always` / `exceptZero` add a plus sign to positive values.
`formatOptions`	`Intl.NumberFormatOptions`		Raw Intl.NumberFormat options, applied last.
`label`	`ReactNode`		Caption before the number: a currency code, a metric name.
`unit`	`ReactNode`		Unit after the number in a lighter weight: "kcal", "steps", "avg".
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Text size of the number. Default `md`.
`tone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Color of the number. Default `neutral`.
`layout`	`'inline' \| 'row' \| 'stacked'`	`'inline'`	`inline` puts the label before the number; `row` pushes them to opposite ends; `stacked` puts the label above.
`locale`	`string`		BCP 47 locale. Default: the `ThemeProvider` locale, then the browser's.