Components

<Num>

<Num>コンポーネントのAPIリファレンス

概要

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

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

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

リファレンス

Props

PropTypeDefault
locales??
string[]
undefined
options??
Intl.NumberFormatOptions
{}
value??
string | number
undefined
name??
string
undefined
children??
any
undefined

説明

Prop説明
childrenコンポーネント内にレンダリングされる内容。通常は数値で、現在のロケールやオプションに従ってフォーマットされます。指定された場合、value プロップより優先されます。
name数値フィールドのオプション名。メタデータ用途で使用されます。
value数値のデフォルト値。文字列または数値を指定できます。文字列の場合は、フォーマット前に数値へ変換されます。
options数値のフォーマット用オプション。Intl.NumberFormatOptions 仕様に従います。通貨や小数点以下の桁数などのスタイルを定義する際に使用します。
localesフォーマットに使用するロケールを指定するオプション。指定しない場合は、ユーザーのデフォルトロケールが使用されます。ロケールの指定方法についてはこちらをご覧ください。

戻り値

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


基本例

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

QuantityDisplay.jsx
import { Num } from 'gt-react';

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

ロケールの指定

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

PriceDisplay.jsx
import { Num } from 'gt-react';

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

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

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

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

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-react';

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

注意事項

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

次のステップ

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

このガイドはいかがですか?