<Num>

概要

<Num> コンポーネントは、ユーザーのロケールでフォーマットされた数値文字列をレンダリングし、フォーマットオプションでカスタマイズできます。

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

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

リファレンス

Props

Prop	Type	Default
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`locales??`	`string[]`	`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> のような他の変数コンポーネントの詳細と使用例については、変数コンポーネントの使用ドキュメントを参照してください。

<Num>

このページについて