NumberValue
A number formatted once with Intl.NumberFormat, in a <data> element whose value attribute keeps the raw number. Tabular figures, so a column of values lines up. Every dashboard part renders its numbers with it.
Import
import { NumberValue } from '@nizivo/react/number-value';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/number-value.css';Static or interactive
Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build
mode; its code is bundled only when a client component (a 'use client' file) imports it. The text is formatted on the server with Intl.NumberFormat(locale, format); formatNumber, exported
from the same subpath, returns the same text, so CountUp's client frames end on exactly the server's
string. How to choose.
In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.
Examples
Basic
import type { JSX } from 'react';
import { NumberValue } from '@nizivo/react/number-value';
export function NumberValueExample(): JSX.Element {
return (
<div>
<NumberValue value={48290} />
<NumberValue
value={123307.4}
format={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
/>
<NumberValue value={0.032} format={{ style: 'percent', maximumFractionDigits: 1 }} />
<NumberValue value={1284000} format={{ notation: 'compact' }} />
<NumberValue value={1250} format={{ style: 'currency', currency: 'EUR' }} locale="de-DE" />
</div>
);
}
Props
A formatted number in a <data> element: tabular figures, isolated from the surrounding direction, never wrapped inside the number (§16.4). It takes the surrounding font; Metric gives it Numeric/*.
Server component Renders data-slot="number-value" with the class nz-number-value. Props: NumberValueProps. Source: src/number-value/number-value.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
format | Intl.NumberFormatOptions | {} |
|
locale | string | 'en-US' | BCP 47 tag for the number. |
render | RenderProp<NumberValueState> | – | |
valuerequired | number | – | The number. The element's |
- Also takes every attribute of
<data>exceptchildren,value. (Omit<ComponentPropsWithRef<"data">, "value" | "children">)
render takes an element, or, in client code, a function of the props and this state (NumberValueState):
| Name | Type | Default | Description |
|---|---|---|---|
textrequired | string | – | The formatted text the element shows. |
valuerequired | number | – |
Other exports
NumberValuePropstypeimport type { NumberValueProps } from '@nizivo/react/number-value'The props of
NumberValue, listed above.NumberValueStatetypeimport type { NumberValueState } from '@nizivo/react/number-value'The render state of
NumberValue, listed above.formatNumberfunctionimport { formatNumber } from '@nizivo/react/number-value'The text NumberValue renders for
value:Intl.NumberFormat(locale, format), nothing else.function formatNumber(value: number, format?: Intl.NumberFormatOptions, locale?: string): string
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
number-value.nz-number-value | NumberValueroot (takes render) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-number-value.
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
Figma
Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.
- Canonical: none
- Ghost masters: none
NumberField
A number in the reader's locale, a price, a percent or a unit, in Input's box. It formats on blur, parses what is typed in the locale, clamps to min and max, and steps with the arrow keys; step buttons are optional. A form gets the plain number.
PageHeader
The top of a page, under the shell's top bar. The page's one <h1>, an optional status beside it and a line under it, and the page's controls at the row's end. Server-rendered, no client JS.