フォーマット機能
- react-number-format:
数値、通貨、パーセンテージなど、複数の形式で入力をフォーマットでき、フォーマットの種類を簡単に切り替え可能。
- react-input-mask:
入力中にマスクを適用し、特定の形式（例：電話番号、クレジットカード番号）に従った入力を促す。
- react-text-mask:
テキスト入力にマスクを適用し、カスタムマスクを作成できる。特定の形式に縛られず、柔軟なマスキングが可能。
- react-currency-input-field:
リアルタイムで通貨形式にフォーマットし、通貨シンボルや小数点以下の桁数をカスタマイズ可能。
- react-numeric-input:
数値入力に特化しており、スピナーを使った増減が可能。フォーマットはシンプルで、数値の範囲を制限できる。
カスタマイズ性
- react-number-format:
数値形式、通貨形式、パーセンテージ形式など、複数の形式を簡単にカスタマイズできる。
- react-input-mask:
マスクのパターンを自由に定義できるが、カスタマイズには少し手間がかかる場合がある。
- react-text-mask:
マスクのパターンを自由に定義でき、カスタムコンポーネントを使用することで柔軟にカスタマイズ可能。
- react-currency-input-field:
通貨シンボル、小数点以下の桁数、フォーマット方法を詳細にカスタマイズできる。
- react-numeric-input:
数値の範囲、ステップ値、スピナーの表示などをカスタマイズできるが、フォーマットの自由度は低い。
ユーザーエクスペリエンス
- react-number-format:
数値や通貨を視覚的にわかりやすく表示し、ユーザーの入力をサポートする。
- react-input-mask:
入力マスクにより、ユーザーが正しい形式で入力しやすくなる。
- react-text-mask:
マスクを適用することで、ユーザーが特定の形式で入力することを促すが、マスクが複雑な場合は混乱を招くこともある。
- react-currency-input-field:
通貨入力に特化しており、ユーザーが直感的に入力できるように設計されている。
- react-numeric-input:
スピナーを使った数値入力が可能で、特に数値の増減が直感的に行える。
コード例
- react-number-format:
数値フォーマットの例
import { NumberFormat } from 'react-number-format'; function NumberFormatExample() { return ( <NumberFormat value={1000} displayType="input" thousandSeparator prefix="$" onValueChange={(values) => { const { formattedValue, value } = values; console.log(formattedValue, value); }} /> ); } - react-input-mask:
入力マスクの例
import InputMask from 'react-input-mask'; function PhoneNumberInput() { return ( <InputMask mask="(999) 999-9999" placeholder="(123) 456-7890"> {(inputProps) => <input {...inputProps} />} </InputMask> ); } - react-text-mask:
テキストマスクの例
import TextMask from 'react-text-mask'; function CreditCardInput() { return ( <TextMask mask={[/[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, ' ', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, ' ', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, ' ', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/]} placeholder="4242 4242 4242 4242" > {(inputProps) => <input {...inputProps} />} </TextMask> ); } - react-currency-input-field:
通貨入力フィールドの例
import CurrencyInput from 'react-currency-input-field'; function CurrencyInputExample() { return ( <CurrencyInput id="currency-input" name="currency-input" placeholder="Enter amount" defaultValue={1000} decimalsLimit={2} prefix="$" onValueChange={(value, name) => { console.log(value); }} /> ); } - react-numeric-input:
数値入力の例
import NumericInput from 'react-numeric-input'; function NumericInputExample() { return ( <NumericInput min={1} max={10} step={1} /> ); }