FormattedNumber

February 21, 2020 · View on GitHub

Formats a number based on the locale and options.

Usage

import { FormattedNumber } from 'react-native-globalize';

const ExampleComponent = () => (
  <FormattedNumber value={100000} />
);
// 100,000

Type	Required	Default	Description
string	No	none	Use compact number format. Possible values: `short`, `long`.

<FormattedNumber
  value={100000}
  compact="short"
/>
// 100K

Type	Required	Default	Description
number	No	none	Override maximum fraction digits. Numbers will be rounded if needed based on `round` option.

<FormattedNumber
  value={10.45}
  maximumFractionDigits={0}
/>
// 10

Type	Required	Default	Description
number	No	none	Override maximum significant (integer + fraction) digits. Numbers will be rounded if needed based on `round` option. Must also specify `minimumSignificantDigits`.

<FormattedNumber
  value={10.45}
  maximumSignificantDigits={3}
  minimumSignificantDigits={1}
/>
// 10.5

Type	Required	Default	Description
number	No	none	Override minimum fraction digits. Numbers will be rounded based on `round` option or padded if needed.

<FormattedNumber
  value={10.45}
  minimumFractionDigits={4}
/>
// 10.4500

Type	Required	Default	Description
number	No	none	Override minimum integer digits. Numbers will be padded if needed.

<FormattedNumber
  value={10.45}
  minimumIntegerDigits={3}
/>
// 010.45

Type	Required	Default	Description
number	No	none	Override minimum significant (integer + fraction) digits. Numbers will be padded if needed. Must also specify `maximumSignificantDigits`.

<FormattedNumber
  value={10.45}
  minimumSignificantDigits={6}
  maximumSignificantDigits={8}
/>
// 10.4500

Type	Required	Default	Description
string	No	`decimal`	Change display style. Possible values: `decimal`, `percent`.

<FormattedNumber
  value={0.45}
  numberStyle="decimal"
/>
// 0.45
<FormattedNumber
  value={0.45}
  numberStyle="percent"
/>
// 45%

Type	Required	Default	Description
string	No	`round`	Specify rounding behavior. Possible values: `ceil`, `floor`, `round`, `truncate`.

<FormattedNumber
  value={10.45}
  maximumFractionDigits={0}
  round="ceil"
/>
// 11

Type	Required	Default	Description
boolean	No	`true`	Whether to use grouping separator.

<FormattedNumber
  value={100000}
  useGrouping={false}
/>
// 100000

Type	Required	Default	Description
number	Yes	none	Number to be formatted.