Components
Structure
Unit
Documentation up to date

Unit

Import statement

import { Unit } from "@wfp/react"

The Unit component method returns a component with a language and unit sensitive representation of this number based on Numbers and Unit from the Editorial Guidelines the Numbers and Units Reference on developer.mozilla.org.

Usage

Editable Example

import { Unit } from "@wfp/react";

<Unit type="usd">123456.12</>

Number fraction digits

Expand code

Editable Example

import { Unit, Table } from "@wfp/react";

<Table>
  <thead>
    <tr>
      <td>Input value</td>
      <td>minimumFractionDigits</td>
      <td>maximumFractionDigits</td>
      <td>Result</td>
      <td>Comment</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0.1234567</td>
      <td>3</td>
      <td>3</td>
      <td>
        <Unit
          type="num"
          hideEmpty={false}
          minimumFractionDigits={3}
          maximumFractionDigits={3}
        >
          {0.1234567}
        </Unit>
      </td>
      <td>
        <Text kind="caption">
          uses minimumFractionDigits and
          maximumFractionDigits
        </Text>
      </td>
    </tr>
    <tr>
      <td>0.1234567</td>
      <td>0</td>
      <td>0</td>
      <td>
        <Unit
          type="num"
          hideEmpty={false}
          minimumFractionDigits={0}
          maximumFractionDigits={0}
        >
          {0.1234567}
        </Unit>
      </td>
      <td>
        <Text kind="caption">
          detects value smaller than 1 and adopts
          minimumFractionDigits to avoid displaying 0
        </Text>
      </td>
    </tr>
    <tr>
      <td>12345.1234567</td>
      <td>0</td>
      <td>0</td>
      <td>
        <Unit
          type="num"
          hideEmpty={false}
          minimumFractionDigits={0}
          maximumFractionDigits={0}
        >
          {12345.1234567}
        </Unit>
      </td>
      <td>
        <Text kind="caption">
          detects value larger than 1 uses
          minimumFractionDigits and
          maximumFractionDigits
        </Text>
      </td>
    </tr>
  </tbody>
</Table>;

On this page

References