react intl formatted duration
v4.0.0
React-intl est une bibliothèque étonnante fournissant des composants React et une API pour localiser votre application, mais il lui manque un composant Duration .
Si vous souhaitez afficher le temps nécessaire pour faire quelque chose comme 1 minute ou 5 minutes ou même un simple minuteur 0:30 vous n'avez pas de chance car le comité ECMA n'a pas encore spécifié le DurationFormat.
Ce composant fournit une abstraction très simple qui fonctionne sur React (DOM), React Native et tout autre environnement cible pour formater des durées simples.
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`
}Le format par défaut affiche uniquement les minutes et les secondes. Pour des besoins plus complexes, consultez la section format personnalisé.
Par défaut, le texte de sortie est enveloppé dans un span , vous pouvez spécifier n'importe quel composant de votre choix disponible sur votre environnement cible :
// 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`
} Si vous souhaitez styliser les nombres différemment du texte, vous pouvez transmettre un valueComponent
< FormattedDuration seconds = { 90 } textComponent = { Text } valueComponent = { Value } / >
// renders
< Value > 1 < / Value> minute< / Text > < Value > 30 < / Value > < Text > seconds < / Text> Avoir différents composants n’est pas seulement utile pour le style. Certaines langues utilisent des systèmes de numérotation différents. Par exemple, le japonais a des nombres pleine chasse, vous souhaiterez peut-être afficher １０分au lieu de 10分, pour ce faire, vous pouvez utiliser :
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 `１０分`
} Par défaut, le composant n'affiche que les minutes et les secondes. Si vous souhaitez afficher les heures ou les jours, vous pouvez utiliser un format personnalisé :
< 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`
}Les secondes sont également facultatives et si elles sont manquantes, les minutes seront arrondies à la valeur fermée
< 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`Le format personnalisé peut lui-même être localisé en transmettant un identifiant de message au lieu de la valeur réelle
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 }
/ >
) ;
} Alors que format permet de sélectionner les unités à restituer, unitDisplay permet de configurer la façon dont chaque unité est rendue.
< 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 attend les clés suivantes dans votre fichier de traduction
react-intl-formatted-duration.longFormatting le format par défaut qui génère quelque chose comme 1 minute 30 seconds . Il utilise les valeurs {days} , {hours} , {minutes} et {seconds} . Par exemple, vous pouvez le modifier en {minutes} and {seconds} .react-intl-formatted-duration.duration le format utilisé par les variables minutes et seconds décrites ci-dessus. Il utilise les valeurs {value} et {unit} . La valeur par défaut est {value} {unit} où value est un nombre et {unit} est l'unité textuelle comme minute(s) ou second(s) .react-intl-formatted-duration.timerFormatting pour TIMER_FORMAT , par défaut {minutes}:{seconds} où les deux valeurs sont des nombres complétés pour avoir une longueur minimale de 2 caractèresreact-intl-formatted-duration.daysUnit pour le formatage des jours, par défaut {value, plural, one {day} other {days}}react-intl-formatted-duration.hoursUnit pour le formatage des heures, par défaut {value, plural, one {hour} other {hours}}react-intl-formatted-duration.minutesUnit pour le formatage des minutes, par défaut {value, plural, one {minute} other {minutes}}react-intl-formatted-duration.secondsUnit pour le formatage des secondes, par défaut {value, plural, one {second} other {seconds}} Les messages pour daysUnit , hoursUnit , minutesUnit , secondsUnit utilisent la syntaxe format-js et ne sont utilisés que lorsque unitDisplay n'est pas spécifié.
Si vous utilisez le script extract-intl de React-boilerplate, vous pouvez importer react-intl-formatted-duration/messages pour générer automatiquement les clés dans vos fichiers de traduction.
La version 2.x permet d'utiliser toute la puissance de la syntaxe des messages format-js. Tout ce que vous avez à faire est de supprimer toutes les clés comme daysSingular , dayPlural et d'utiliser daysUnit avec le format décrit ci-dessus.
La version 3.x a exactement la même API que la version 2.x mais est une réécriture complète. Vous n'avez pas besoin de changer votre code.
La version 4.x ne modifie aucun comportement par défaut de la version 3.x et ne contient que de nouvelles fonctionnalités. Cependant, en interne, il fait passer la version du intl-unofficial-duration-unit-format de 1.x à 3.x , ce qui nécessite désormais que Intl.NumberFormat soit disponible dans le monde entier. Si vous avez correctement installé react-intl , il est probable que vous n'ayez pas besoin de modifier votre code.
