Light Dark System

Format Number

<p-format-number> | PFormatNumber
Since 1.0 stable

Formats a number using the specified locale and options.

Localization is handled by the browser’s Intl.NumberFormat API. No language packs are required. 



<div class="format-number-overview">
  <p-format-number value="1000"></p-format-number>
  <br /><br />
  <p-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></p-input>
</div>

<script>
  const container = document.querySelector('.format-number-overview');
  const formatter = container.querySelector('p-format-number');
  const input = container.querySelector('p-input');

  input.addEventListener('p-input', () => (formatter.value = input.value || 0));
</script>

import { useState } from 'react';
import PFormatNumber from 'pure-uikit/dist/react/format-number';
import PInput from 'pure-uikit/dist/react/input';

const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
      <PFormatNumber value={value} />
      <br />
      <br />
      <PInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
        onPInput={event => setValue(event.target.value)}
      />
    </>
  );
};

Examples

Percentages

To get the value as a percent, set the type attribute to percent.





<p-format-number type="percent" value="0"></p-format-number><br />
<p-format-number type="percent" value="0.25"></p-format-number><br />
<p-format-number type="percent" value="0.50"></p-format-number><br />
<p-format-number type="percent" value="0.75"></p-format-number><br />
<p-format-number type="percent" value="1"></p-format-number>

import PFormatNumber from 'pure-uikit/dist/react/format-number';

const App = () => (
  <>
    <PFormatNumber type="percent" value={0} />
    <br />
    <PFormatNumber type="percent" value={0.25} />
    <br />
    <PFormatNumber type="percent" value={0.5} />
    <br />
    <PFormatNumber type="percent" value={0.75} />
    <br />
    <PFormatNumber type="percent" value={1} />
  </>
);

Localization

Use the lang attribute to set the number formatting locale.

English:
German:
Russian: 
English: <p-format-number value="2000" lang="en" minimum-fraction-digits="2"></p-format-number><br />
German: <p-format-number value="2000" lang="de" minimum-fraction-digits="2"></p-format-number><br />
Russian: <p-format-number value="2000" lang="ru" minimum-fraction-digits="2"></p-format-number>

import PFormatNumber from 'pure-uikit/dist/react/format-number';

const App = () => (
  <>
    English: <PFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
    <br />
    German: <PFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
    <br />
    Russian: <PFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
  </>
);

Currency

To format a number as a monetary value, set the type attribute to currency and set the currency attribute to the desired ISO 4217 currency code. You should also specify lang to ensure the the number is formatted correctly for the target locale. 





<p-format-number type="currency" currency="USD" value="2000" lang="en-US"></p-format-number><br />
<p-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></p-format-number><br />
<p-format-number type="currency" currency="EUR" value="2000" lang="de"></p-format-number><br />
<p-format-number type="currency" currency="RUB" value="2000" lang="ru"></p-format-number><br />
<p-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></p-format-number>

import PFormatNumber from 'pure-uikit/dist/react/format-number';

const App = () => (
  <>
    <PFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
    <br />
    <PFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
    <br />
    <PFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
    <br />
    <PFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
    <br />
    <PFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-number/format-number.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-number/format-number.js';

To import this component using a bundler:

import 'pure-uikit/dist/components/format-number/format-number.js';

To import this component as a React component:

import PFormatNumber from 'pure-uikit/dist/react/format-number';

Properties

Name Description Reflects Type Default
value The number to format. number 0
type The formatting style to use. "currency" | "decimal" | "percent" "decimal"
noGrouping
no-grouping 		Turns off grouping separators. boolean false
currency The ISO 4217 currency code to use when formatting. string "USD"
currencyDisplay
currency-display 		How to display the currency. "symbol" | "narrowSymbol" | "code" | "name" "symbol"
minimumIntegerDigits
minimum-integer-digits 		The minimum number of integer digits to use. Possible values are 1–21. number -
minimumFractionDigits
minimum-fraction-digits 		The minimum number of fraction digits to use. Possible values are 0–20. number -
maximumFractionDigits
maximum-fraction-digits 		The maximum number of fraction digits to use. Possible values are 0–0. number -
minimumSignificantDigits
minimum-significant-digits 		The minimum number of significant digits to use. Possible values are 1–21. number -
maximumSignificantDigits
maximum-significant-digits 		The maximum number of significant digits to use,. Possible values are 1–21. number -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.