react intl formatted duration

Formatierte Dauer

React-intl ist eine erstaunliche Bibliothek, die React-Komponenten und eine API zur Lokalisierung Ihrer Anwendung bereitstellt, ihr fehlt jedoch eine Duration Komponente.

Wenn Sie die Zeit anzeigen möchten, die benötigt wird, um etwa 1 minute oder 5 minutes oder sogar einen einfachen Timer 0:30 auszuführen, haben Sie Pech, da das ECMA-Komitee das DurationFormat noch nicht festgelegt hat.

Diese Komponente bietet eine sehr einfache Abstraktion, die auf React (DOM), React Native und jeder anderen Zielumgebung funktioniert, um einfache Dauern zu formatieren.

Verwendung

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

Erweitertes Format

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

Das Standardformat zeigt nur Minuten und Sekunden an. Für komplexere Anforderungen sehen Sie sich den Abschnitt zum benutzerdefinierten Format an.

Standardmäßig ist der Ausgabetext in einen span eingeschlossen. Sie können jede beliebige Komponente angeben, die in Ihrer Zielumgebung verfügbar ist:

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

Styling-Nummern

Wenn Sie Zahlen anders als Text formatieren möchten, können Sie eine valueComponent übergeben

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

// renders

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

Unterschiedliche Komponenten sind nicht nur für das Styling nützlich. Einige Sprachen verwenden unterschiedliche Nummerierungssysteme. Beispielsweise gibt es im Japanischen Zahlen in voller Breite. Daher möchten Sie möglicherweise １０分anstelle von 10分darstellen. Dazu können Sie Folgendes verwenden:

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

Benutzerdefiniertes Format

Stunden und Tage

Standardmäßig rendert die Komponente nur Minuten und Sekunden. Wenn Sie Stunden oder Tage anzeigen möchten, können Sie ein benutzerdefiniertes Format verwenden:

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

Sekunden sind ebenfalls optional und wenn sie fehlen, werden die Minuten auf den geschlossenen Wert gerundet

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

Das benutzerdefinierte Format selbst kann lokalisiert werden, indem eine Nachrichten-ID anstelle des tatsächlichen Werts übergeben wird

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

Einheitenanzeige

Während format die Auswahl der zu rendernden Einheiten ermöglicht, ermöglicht unitDisplay die Konfiguration der Art und Weise, wie jede Einheit gerendert wird.

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

Timer-Format

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

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

Lokalisierung

react-intl-formatted-duration erwartet die folgenden Schlüssel in Ihrer Übersetzungsdatei

• react-intl-formatted-duration.longFormatting des Standardformats, das etwa 1 minute 30 seconds generiert. Es werden die Werte {days} , {hours} , {minutes} und {seconds} verwendet. Sie können es beispielsweise in {minutes} and {seconds} ändern.
• react-intl-formatted-duration.duration ist das Format, das von den oben beschriebenen minutes und seconds verwendet wird. Es verwendet die Werte {value} und {unit} . Der Standardwert ist {value} {unit} wobei value eine Zahl und {unit} die Texteinheit wie minute(s) oder second(s) ist.
• react-intl-formatted-duration.timerFormatting für TIMER_FORMAT ist standardmäßig {minutes}:{seconds} wobei beide Werte aufgefüllte Zahlen sind, die eine Mindestlänge von 2 Zeichen haben
• react-intl-formatted-duration.daysUnit zum Formatieren von Tagen, Standardwert {value, plural, one {day} other {days}}
• react-intl-formatted-duration.hoursUnit -String zum Formatieren von Stunden, Standardwert {value, plural, one {hour} other {hours}}
• react-intl-formatted-duration.minutesUnit -String zum Formatieren von Minuten, Standardwert {value, plural, one {minute} other {minutes}}
• react-intl-formatted-duration.secondsUnit -String zur Formatierung von Sekunden, Standardwert {value, plural, one {second} other {seconds}}

Die Meldungen für daysUnit , hoursUnit , minutesUnit , secondsUnit verwenden die format-js-Syntax und werden nur verwendet, wenn unitDisplay nicht angegeben ist.

Wenn Sie das Skript extract-intl von „react-boilerplate“ verwenden, können Sie react-intl-formatted-duration/messages importieren, um die Schlüssel automatisch in Ihren Übersetzungsdateien zu generieren.

Upgrade von Version 1.0

Version 2.x ermöglicht die Nutzung der gesamten Leistungsfähigkeit der Format-js-Nachrichtensyntax. Sie müssen lediglich alle Schlüssel wie daysSingular und dayPlural entfernen und einfach daysUnit mit dem oben beschriebenen Format verwenden.

Upgrade von Version 2.0

Version 3.x hat genau die gleiche API wie Version 2.x ist jedoch komplett neu geschrieben. Sie müssen Ihren Code nicht ändern.

Upgrade von Version 3.0

Version 4.x ändert nichts am Standardverhalten von Version 3.x und enthält nur neue Funktionen. Allerdings wird intern die Version des intl-unofficial-duration-unit-format von 1.x auf 3.x erhöht, was nun erfordert, dass Intl.NumberFormat global verfügbar ist. Wenn Sie react-intl korrekt installiert haben, müssen Sie Ihren Code wahrscheinlich nicht ändern.