Numbers

Counts, decimals, percentages, money, sizes and token counts, each in the notation of the region.

import { formatBytes, formatDecimal, formatMoney, formatNumber, formatPercent, formatTokens, formatUsdSignificant } from '@basmilius/react-ui/format';

tsx

import {
    formatBytes,
    formatDecimal,
    formatMoney,
    formatNumber,
    formatPercent,
    formatTokens,
    formatUsdSignificant,
    useFormatLocale
} from '@basmilius/react-ui/format';
import { PreferencesBar } from '../shared/preferences-bar.tsx';
import { Values } from '../shared/values.tsx';

export default function NumbersDemo() {
    useFormatLocale();

    return (
        <div className="flex w-full max-w-lg flex-col gap-4">
            <PreferencesBar />
            <Values
                rows={[
                    ['formatNumber(1234567.8)', formatNumber(1234567.8)],
                    ['formatDecimal(1.25)', formatDecimal(1.25)],
                    ['formatPercent(4.25)', formatPercent(4.25)],
                    ['formatPercent(42.5)', formatPercent(42.5)],
                    ["formatMoney(5480.96, 'USD')", formatMoney(5480.96, 'USD')],
                    ["formatMoney(12, 'EUR', 0)", formatMoney(12, 'EUR', 0)],
                    ['formatUsdSignificant(0.004213)', formatUsdSignificant(0.004213)],
                    ['formatTokens(1234567)', formatTokens(1234567)],
                    ['formatTokens(412300)', formatTokens(412300)],
                    ['formatBytes(1536)', formatBytes(1536)],
                    ['formatBytes(52428800, true)', formatBytes(52428800, true)]
                ]}
            />
        </div>
    );
}

Function	Writes
`formatNumber(value)`	A whole number, grouped the way the region groups one: `1,234,568` or `1.234.568`. It rounds first.
`formatDecimal(value)`	The same with at most one decimal, where the fraction is the part that means something.
`formatPercent(value)`	A percentage of a value that is already a percent: one decimal under ten, where the difference still shows, and whole above. `4.3%`, `43%`.
`formatMoney(value, currency, maximumFractionDigits?)`	An amount in the currency it is already in, with the narrow symbol, so a Dutch region writes `$ 5.480,96` and not `US$ 5.480,96`.
`formatUsdSignificant(value)`	Dollars to three significant digits, for a list of amounts that runs from a fraction of a cent to tens of dollars.
`formatTokens(value)`	A size rather than a count: `1.2M`, `412K`, `640`.
`formatBytes(bytes, whole?)`	A file size in B, KB, MB, GB or TB, with one decimal under ten above a kilobyte. `whole` rounds for a column with no room for a decimal.

None of these converts. formatMoney never changes the currency, and formatBytes counts in steps of 1024.

Numbers ​

Numbers