Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Localize: Format Numbers

Features

  • Small file size
  • Uses Intl.NumberFormat but patches browser inconsistencies

Formatting

With the formatNumber you can safely display a number for all languages.

The input value is 1234.56.

export const formatting = () => html`
  <style>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Options</th>
        <th>Output</th>
        <th>Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>___HTML_1___</td>
        <td></td>
      </tr>
      <tr>
        <td>Currency symbol</td>
        <td>
          ___HTML_2___
        </td>
        <td>
          <code
            >formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR' })</code
          >
        </td>
      </tr>
      <tr>
        <td>Currency code</td>
        <td>
          ___HTML_3___
        </td>
        <td>
          <code>formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code>
        </td>
      </tr>
      <tr>
        <td>Locale</td>
        <td>___HTML_4___</td>
        <td><code>formatNumber({ locale: 'nl-NL' })</code></td>
      </tr>
      <tr>
        <td>No decimals</td>
        <td>
          ___HTML_5___
        </td>
        <td>
          <code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
        </td>
      </tr>
    </tbody>
  </table>
`;

Formatting parts

formatNumberToParts allows to get individual parts of a number on all browsers.

The input value 1234.56 gets formatted via

formatNumberToParts(value, { style: 'currency', currency: 'EUR' });
export const formattingParts = () => html`
  <style>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Part</th>
        <th>Output</th>
      </tr>
    </thead>
    <tbody>
      ___HTML_1___
    </tbody>
  </table>
`;

List common locales

The input value is 1234.56. Formatting happens via

formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
export const listCommonLocales = () => html`
  <style>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Locale</th>
        <th>Output Euro</th>
        <th>Output US Dollar</th>
      </tr>
    </thead>
    <tbody>
      ___HTML_1___
    </tbody>
  </table>
`;

List all locales

The following list show number formatting for all known locales.

The input value is 1234.56. Formatting happens via

formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
export const listAllLocales = () => html`
  <style>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <tr>
      <th>Locale</th>
      <th>Output Euro</th>
      <th>Output US Dollar</th>
    </tr>
    ___HTML_1___
  </table>
`;