react intl formatted duration

Duración formateada

reaccionar-intl es una biblioteca increíble que proporciona componentes de React y API para localizar su aplicación, sin embargo, carece de un componente Duration .

Si desea mostrar el tiempo que lleva hacer algo como 1 minute o 5 minutes o incluso un simple temporizador 0:30 no tiene suerte porque el comité ECMA aún no ha especificado el DurationFormat.

Este componente proporciona una abstracción muy simple que funciona en React (DOM), React Native y cualquier otro entorno de destino para formatear duraciones simples.

Uso

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

formato extendido

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

El formato predeterminado solo muestra minutos y segundos. Para necesidades más complejas consulte la sección de formato personalizado.

De forma predeterminada, el texto de salida está envuelto en un span ; puede especificar cualquier componente que desee disponible en su entorno de destino:

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

Números de estilo

Si desea aplicar un estilo a los números de manera diferente al texto, puede pasar un valueComponent

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

// renders

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

Tener diferentes componentes es útil no sólo para el peinado. Algunos idiomas utilizan diferentes sistemas de numeración. Por ejemplo, el japonés tiene números de ancho completo, por lo que es posible que quieras representar １０分en lugar de 10分; para hacerlo, puedes usar:

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

Formato personalizado

Horas y días

De forma predeterminada, el componente solo muestra minutos y segundos; si desea mostrar horas o días, puede usar un formato personalizado:

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

Los segundos también son opcionales y, si faltan, los minutos se redondearán al valor cerrado.

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

El formato personalizado se puede localizar pasando una identificación de mensaje en lugar del valor real.

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

Pantalla de unidad

Mientras que format permite seleccionar qué unidades renderizar, unitDisplay permite configurar la forma en que se renderiza cada unidad.

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

Formato del temporizador

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

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

Localización

react-intl-formatted-duration espera las siguientes claves dentro de su archivo de traducción

• react-intl-formatted-duration.longFormatting el formato predeterminado que genera algo así como 1 minute 30 seconds . Utiliza los valores {days} , {hours} , {minutes} y {seconds} . Por ejemplo, puedes cambiarlo a {minutes} and {seconds} .
• react-intl-formatted-duration.duration el formato utilizado por las variables minutes y seconds descritas anteriormente. Utiliza los valores {value} y {unit} . El valor predeterminado es {value} {unit} donde value es un número y {unit} es la unidad textual como minute(s) o second(s) .
• react-intl-formatted-duration.timerFormatting de formato para TIMER_FORMAT , el valor predeterminado es {minutes}:{seconds} donde ambos valores son números rellenados para tener una longitud mínima de 2 caracteres
• react-intl-formatted-duration.daysUnit cadena para formatear días, predeterminado {value, plural, one {day} other {days}}
• react-intl-formatted-duration.hoursUnit cadena para formatear horas, predeterminado {value, plural, one {hour} other {hours}}
• react-intl-formatted-duration.minutesUnit de cadena para formatear minutos, predeterminado {value, plural, one {minute} other {minutes}}
• react-intl-formatted-duration.secondsUnit de unidad para formatear segundos, predeterminado {value, plural, one {second} other {seconds}}

Los mensajes para daysUnit , hoursUnit , minutesUnit , secondsUnit usan la sintaxis format-js y solo se usan cuando no se especifica unitDisplay .

Si está utilizando el script extract-intl de react-boilerplate, puede importar react-intl-formatted-duration/messages para generar automáticamente las claves en sus archivos de traducción.

Actualización desde la versión 1.0

La versión 2.x permite utilizar todo el poder de la sintaxis de mensajes format-js. Todo lo que necesitas hacer es eliminar todas las claves como daysSingular , dayPlural y simplemente usar daysUnit con el formato descrito anteriormente.

Actualización desde la versión 2.0

La versión 3.x tiene exactamente la misma API que la versión 2.x pero es una reescritura completa. No necesitas cambiar tu código.

Actualización desde la versión 3.0

La versión 4.x no cambia ninguno de los comportamientos predeterminados de la versión 3.x y solo contiene nuevas características. Sin embargo, internamente aumenta la versión de intl-unofficial-duration-unit-format de 1.x a 3.x , lo que ahora requiere que Intl.NumberFormat esté disponible globalmente. Si ha instalado react-intl correctamente, es probable que no necesite cambiar su código.