react intl formatted duration

Durasi yang Diformat

react-intl adalah perpustakaan luar biasa yang menyediakan komponen React dan API untuk melokalisasi aplikasi Anda, namun tidak memiliki komponen Duration .

Jika Anda ingin menunjukkan waktu yang diperlukan untuk melakukan sesuatu seperti 1 minute atau 5 minutes atau bahkan pengatur waktu sederhana 0:30 Anda kurang beruntung karena panitia ECMA belum menentukan DurationFormatnya.

Komponen ini menyediakan abstraksi yang sangat sederhana yang berfungsi pada React (DOM), React Native, dan lingkungan target lainnya untuk memformat durasi sederhana.

Penggunaan

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

Format yang diperluas

 // 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`
}

Format default hanya menampilkan menit dan detik. Untuk kebutuhan yang lebih kompleks, periksa bagian format khusus.

Secara default, teks keluaran dibungkus dalam span , Anda dapat menentukan komponen apa pun yang Anda suka tersedia di lingkungan target Anda:

 // 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`
} 

Nomor gaya

Jika Anda ingin menata angka secara berbeda dari teks, Anda dapat meneruskan valueComponent

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

// renders

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

Kehadiran komponen yang berbeda berguna tidak hanya untuk penataan. Beberapa bahasa menggunakan sistem penomoran yang berbeda. Misalnya bahasa Jepang memiliki angka lebar penuh, jadi Anda mungkin ingin merender １０分bukan 10分, untuk melakukannya Anda dapat menggunakan:

 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 `１０分`
}

Format khusus

Jam dan hari

Secara default komponen hanya merender menit dan detik, jika ingin menampilkan jam atau hari, Anda dapat menggunakan format khusus:

 < 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`
}

Detik juga opsional dan jika tidak ada, menit akan dibulatkan ke nilai tertutup

 < 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`

Format kustom itu sendiri dapat dilokalkan dengan meneruskan id pesan, bukan nilai sebenarnya

 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 }
    / >
  ) ;
} 

Tampilan satuan

Meskipun format memungkinkan untuk memilih unit mana yang akan dirender, unitDisplay memungkinkan untuk mengonfigurasi cara setiap unit dirender.

 < 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` 

Format pengatur waktu

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

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

Lokalisasi

react-intl-formatted-duration mengharapkan kunci berikut di dalam file terjemahan Anda

• react-intl-formatted-duration.longFormatting format default yang menghasilkan sesuatu seperti 1 minute 30 seconds . Ia menggunakan nilai {days} , {hours} , {minutes} dan {seconds} . Misalnya Anda dapat mengubahnya menjadi {minutes} and {seconds} .
• react-intl-formatted-duration.duration format yang digunakan oleh variabel minutes dan seconds yang dijelaskan di atas. Ia menggunakan nilai {value} dan {unit} . Standarnya adalah {value} {unit} dengan value berupa angka dan {unit} adalah satuan tekstual seperti minute(s) atau second(s) .
• react-intl-formatted-duration.timerFormatting format untuk TIMER_FORMAT , defaultnya adalah {minutes}:{seconds} dengan kedua nilai berupa angka yang diisi agar memiliki panjang minimal 2 karakter
• string react-intl-formatted-duration.daysUnit untuk hari pemformatan, default {value, plural, one {day} other {days}}
• string react-intl-formatted-duration.hoursUnit untuk memformat jam, default {value, plural, one {hour} other {hours}}
• string react-intl-formatted-duration.minutesUnit untuk memformat menit, default {value, plural, one {minute} other {minutes}}
• string react-intl-formatted-duration.secondsUnit untuk memformat detik, default {value, plural, one {second} other {seconds}}

Pesan daysUnit , hoursUnit , minutesUnit , secondsUnit menggunakan sintaks format-js dan hanya digunakan ketika unitDisplay tidak ditentukan.

Jika Anda menggunakan skrip extract-intl dari react-boilerplate, Anda dapat mengimpor react-intl-formatted-duration/messages untuk secara otomatis menghasilkan kunci dalam file terjemahan Anda.

Mengupgrade dari versi 1.0

Versi 2.x memungkinkan untuk menggunakan seluruh kekuatan sintaksis pesan format-js. Yang perlu Anda lakukan hanyalah menghapus semua kunci seperti daysSingular , dayPlural dan cukup gunakan daysUnit dengan format yang dijelaskan di atas.

Mengupgrade dari versi 2.0

Versi 3.x memiliki API yang sama persis dengan versi 2.x tetapi merupakan penulisan ulang yang lengkap. Anda tidak perlu mengubah kode Anda.

Mengupgrade dari versi 3.0

Versi 4.x tidak mengubah perilaku default versi 3.x dan hanya berisi fitur baru. Namun secara internal, ini meningkatkan versi intl-unofficial-duration-unit-format dari 1.x menjadi 3.x yang sekarang mengharuskan Intl.NumberFormat tersedia secara global. Jika Anda telah menginstal react-intl dengan benar, kemungkinan besar Anda tidak perlu mengubah kode Anda.