<Num>

概要

<Num> コンポーネントは、ユーザーのロケールに合わせてフォーマットされた数値文字列を表示し、フォーマットオプションでカスタマイズすることができます。

<Num>{100}</Num>
// Output: 100

すべての再フォーマット処理は、Intl.NumberFormat ライブラリを使用してローカルで行われます。

リファレンス

Props

説明

戻り値

フォーマットされた数値を文字列として含む JSX.Element を返します。

例

基本例

この例では、item.quantity がユーザーのロケールに従って再フォーマットされます。

import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

ロケールの指定

デフォルトでは、ロケールはユーザーのブラウザ設定によって決定されますが、<Num> コンポーネントにロケールを明示的に設定することもできます。

import { Num } from 'gt-next';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> 
  );
}

<Num> コンポーネントの翻訳

数値を翻訳される大きな文の中で使いたい場合は、<T> コンポーネントで内容を囲むだけです。

import { T, Num } from 'gt-next';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}

カスタムフォーマット

<Num> はフォーマットに Intl.NumberFormat ライブラリを使用しています。

import { Num } from 'gt-next';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}

注意事項

• <Num> コンポーネントは、ユーザーのロケールに合わせて数値をフォーマットするために使用されます。
• <T> コンポーネント内では、すべての動的な数値を <Num> コンポーネントでラップするようにしてください。

次のステップ

• <Num> コンポーネントや、 <Currency>, <DateTime>, <Var> などの他の変数コンポーネントの詳細や使用例については、変数コンポーネントの使い方 ドキュメントをご覧ください。