概要

<Num> コンポーネントは、ユーザーの locale に合わせて数値を適切に書式化して表示し、formatting の options でカスタマイズできます。

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

すべての書式変換は、ローカル環境で Intl.NumberFormat ライブラリによって行われます。

リファレンス

Props

説明

返り値

文字列として書式化された数値を含む JSX.Element を返します。

例

基本例

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

import { Num } from 'gt-react';

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

locales の指定

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

import { Num } from 'gt-react';

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

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

数値を、翻訳されるより長い文の一部として含めたい場合は、 そのコンテンツを <T> コンポーネントで囲むだけです。

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      利用可能な在庫は <Num> {item.count} </Num> 個あります。 // [!code highlight]
    </T>
  );
}

カスタム書式

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

import { Num } from 'gt-react';

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

注意事項

• <Num> コンポーネントは、ユーザーの locale に応じて数値を整形するために使用します。
• <T> コンポーネント内では、すべての動的な数値を必ず <Num> コンポーネントで包んでください。

次のステップ

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