react intl formatted duration
v4.0.0
React-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 일 형식 지정을 위한 단위 문자열, 기본값 {value, plural, one {day} other {days}}react-intl-formatted-duration.hoursUnit 시간 형식 지정 문자열, 기본값 {value, plural, one {hour} other {hours}}react-intl-formatted-duration.minutesUnit Minutes분 형식 지정을 위한 단위 문자열, 기본값 {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 가져와서 번역 파일에 키를 자동으로 생성할 수 있습니다.
버전 2.x format-js 메시지 구문의 모든 기능을 사용할 수 있습니다. 당신이 해야 할 일은 daysSingular , dayPlural 과 같은 모든 키를 제거하고 위에서 설명한 형식으로 daysUnit 사용하는 것뿐입니다.
버전 3.x 버전 2.x 와 API가 완전히 동일하지만 완전히 다시 작성되었습니다. 코드를 변경할 필요가 없습니다.
버전 4.x 는 버전 3.x 의 기본 동작을 변경하지 않으며 새로운 기능만 포함합니다. 그러나 내부적으로는 intl-unofficial-duration-unit-format 버전을 1.x 에서 3.x 로 변경하여 이제 Intl.NumberFormat 전 세계적으로 사용할 수 있도록 요구합니다. react-intl 올바르게 설치했다면 코드를 변경할 필요가 없을 가능성이 높습니다.
