概要

<Num> コンポーネントは、ユーザーの locale に応じて書式化された数値文字列をレンダリングし、formatting の options でカスタマイズできます。

<Num>{100}</Num>
// 出力：100

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

リファレンス

Props

説明

戻り値

フォーマット済みの数値文字列を含む JSX.Element。

例

基本例

この例では、ユーザーのlocaleに応じて item.quantity が再フォーマットされます。

import { Num } from 'gt-next';

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

locales の指定

既定では、locale はユーザーのブラウザー設定によって決まりますが、 <Num> コンポーネントに対して locale を明示的に設定することもできます。

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">
      在庫は <Num> {item.count} </Num> 個あります。 // [!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> コンポーネントは、ユーザーの locale に合わせて数値を整形するために使用します。
• <T> コンポーネント内では、すべての動的な数値を必ず <Num> コンポーネントで囲んでください。

次のステップ

• <Num> コンポーネントや <Currency>、<DateTime>、<Var> などの他の Variable コンポーネントの詳細や使用例については、