react intl formatted durationダウンロード - react intl formatted durationソースコードのダウンロード

react intl formatted duration

その他のソースコード

v4.0.0

ダウンロード

フォーマットされた期間

act-intl は、アプリケーションをローカライズするための React コンポーネントと API を提供する素晴らしいライブラリですが、 Durationコンポーネントがありません。

1 minuteや5 minutes 、あるいは単純なタイマー0:30などの処理にかかる時間を表示したい場合は、ECMA 委員会がまだDurationFormat を指定していないため、運が悪いです。

このコンポーネントは、React (DOM)、React Native、およびその他のターゲット環境で動作し、単純な期間をフォーマットする非常に単純な抽象化を提供します。

使用法

npm i --save react-intl-formatted-duration

拡張フォーマット

 // Using React DOM
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } / >
  // will render `1 minute`
}

デフォルトの形式では、分と秒のみが表示されます。より複雑なニーズについては、カスタム形式セクションを確認してください。

デフォルトでは、出力テキストはspanで囲まれます。ターゲット環境で使用できる任意のコンポーネントを指定できます。

 // Using React Native
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import { Text } from 'react-native' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
  // will render `1 minute`
}

 // Using styled components
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import styled from 'styled-components' ;
const Text = styled . span `` ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
  // will render `1 minute`
}

数字のスタイリング

数値をテキストとは異なるスタイルにしたい場合は、 valueComponent渡すことができます。

 < FormattedDuration seconds = { 90 } textComponent = { Text } valueComponent = { Value } / >

// renders

< Value > 1 < / Value> minute< / Text > < Value > 30 < / Value > < Text > seconds < / Text>

さまざまなコンポーネントがあることは、スタイリングに役立つだけではありません。一部の言語では異なる番号付けシステムが使用されます。たとえば、日本語には全角の数字があるため、 10分の代わりに１０分を表示したい場合があります。そのためには、次のようにします。

 import React from 'react' ;
import { FormattedNumber } from 'react-intl' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

/*
You'll also need to select Japanese locale and configure the IntlProvider to use
`ja-JP-u-nu-fullwide`

Somewhere in you application
import { IntlProvider } from 'react-intl';

   locale="ja-JP-u-nu-fullwide"
/>
 */

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 600 } textComponent = { Text } valueComponent = { FormattedNumber } / >
  // will render `１０分`
}

カスタムフォーマット

時間と日数

デフォルトでは、コンポーネントは分と秒のみをレンダリングします。時間または日を表示したい場合は、カスタム形式を使用できます。

 < FormattedDuration seconds = { 180000 } format = "{days} {hours} {minutes} {seconds}" / >
// will render `2 days 2 hours`

< FormattedDuration seconds = { 180000 } format = "{hours} {minutes} {seconds}" / >
// will render `50 hours`

< FormattedDuration seconds = { 180000 } format = "{minutes} {seconds}" / >
// will render `3000 minutes`
}

秒もオプションであり、指定されていない場合、分は終了値に丸められます。

 < FormattedDuration seconds = { 10 } format = "{minutes}" / >
// will render `0 minutes`

< FormattedDuration seconds = { 30 } format = "{minutes}" / >
// will render `1 minute`

< FormattedDuration seconds = { 70 } format = "{minutes}" / >
// will render `1 minute`

実際の値の代わりにメッセージ ID を渡すことで、カスタム形式自体をローカライズできます。

 import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import messages from './messages' ;

export default MyComponent ( ) {
  return (
    < FormattedDuration
      seconds = { 600 }
      format = { messages . customFormat . id }
    / >
  ) ;
}

単位表示

formatレンダリングするユニットを選択できますが、 unitDisplay各ユニットのレンダリング方法を構成できます。

 < FormattedDuration seconds = { 60 } unitDisplay = "long" / >
// will render `1 minute`

< FormattedDuration seconds = { 60 } unitDisplay = "short" / >
// will render `1 min`

< FormattedDuration seconds = { 60 } unitDisplay = "narrow" / >
// will render `1m`

タイマーフォーマット

 import FormattedDuration , { TIMER_FORMAT } from 'react-intl-formatted-duration' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } format = { TIMER_FORMAT } / >
  // will render `1:00`
}

ローカリゼーション

react-intl-formatted-duration翻訳ファイル内に次のキーを想定します。

react-intl-formatted-duration.longFormatting 1 minute 30 secondsなどを生成するデフォルト形式をフォーマットします。値として{days} 、 {hours} 、 {minutes}および{seconds}を使用します。たとえば、これを{minutes} and {seconds}に変更できます。
react-intl-formatted-duration.duration上で説明したminutesとseconds変数で使用される形式。値{value}と{unit}を使用します。デフォルトは{value} {unit}です。 valueは数値、 {unit} minute(s)やsecond(s)などのテキスト単位です。
react-intl-formatted-duration.timerFormatting TIMER_FORMATのフォーマット形式。デフォルトは{minutes}:{seconds}です。両方の値は、最小長が 2 文字になるように埋め込まれた数字です。
react-intl-formatted-duration.daysUnit日をフォーマットするためのUnit文字列、デフォルト{value, plural, one {day} other {days}}
react-intl-formatted-duration.hoursUnit時間をフォーマットするためのUnit文字列、デフォルトは{value, plural, one {hour} other {hours}}
react-intl-formatted-duration.minutesUnit分をフォーマットするための単位文字列、デフォルト{value, plural, one {minute} other {minutes}}
react-intl-formatted-duration.secondsUnit秒をフォーマットするための単位文字列、デフォルト{value, plural, one {second} other {seconds}}

daysUnit 、 hoursUnit 、 minutesUnit 、 secondsUnitのメッセージは format-js 構文を使用し、 unitDisplayが指定されていない場合にのみ使用されます。

React-boilerplate のextract-intlスクリプトを使用している場合はreact-intl-formatted-duration/messagesインポートして、翻訳ファイルにキーを自動的に生成できます。

バージョン1.0からのアップグレード

バージョン2.xでは、format-js メッセージ構文の機能をすべて使用できます。必要なのは、 daysSingular 、 dayPluralなどのすべてのキーを削除し、上記の形式でdaysUnitを使用するだけです。

バージョン2.0からのアップグレード

バージョン3.xはバージョン2.xとまったく同じ API がありますが、完全に書き直されました。コードを変更する必要はありません。

バージョン3.0からのアップグレード

バージョン4.xには、バージョン3.xのデフォルトの動作は何も変更されておらず、新機能のみが含まれています。ただし、内部的にはintl-unofficial-duration-unit-formatのバージョンが1.xから3.xに引き上げられるため、 Intl.NumberFormatグローバルに使用できるようにする必要があります。 react-intlを正しくインストールしている場合は、コードを変更する必要はない可能性があります。

拡大する

追加情報