How to use intl-unofficial-duration-unit-format - 4 common examples
To help you get started, we’ve selected a few intl-unofficial-duration-unit-format examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
en-japan-air / react-intl-formatted-duration / index.js View on Github 
function DurationMessage({ intl, seconds, format, textComponent, valueComponent, ...otherProps }: Props) {
let actualFormat = intl.messages[`react-intl-formatted-duration/custom-format/${format || ''}`] || format;
if (!format || format === EXTENDED_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.longFormatting'] || '{minutes} {seconds}';
}
if (format === TIMER_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.timerFormatting'] || '{minutes}:{seconds}';
}
const parts = new DurationUnitFormat(intl.locale, {
format: actualFormat,
formatUnits: {
[DurationUnitFormat.units.DAY]: intl.messages['react-intl-formatted-duration.daysUnit'] || '{value, plural, one {day} other {days}}',
[DurationUnitFormat.units.HOUR]: intl.messages['react-intl-formatted-duration.hoursUnit'] || '{value, plural, one {hour} other {hours}}',
[DurationUnitFormat.units.MINUTE]: intl.messages['react-intl-formatted-duration.minutesUnit'] || '{value, plural, one {minute} other {minutes}}',
[DurationUnitFormat.units.SECOND]: intl.messages['react-intl-formatted-duration.secondsUnit'] || '{value, plural, one {second} other {seconds}}',
},
formatDuration: intl.messages['react-intl-formatted-duration.duration'] || '{value} {unit}',
round: true, // TODO backward compatible, add a prop to configure it
style: format === TIMER_FORMAT ? DurationUnitFormat.styles.TIMER : DurationUnitFormat.styles.CUSTOM,
}).formatToParts(seconds);
const Text = textComponent || intl.textComponent;
const Value = valueComponent || textComponent || intl.textComponent;
return React.createElement(Text, otherProps, parts.map((token) => {
if (token.type === 'literal' || token.type === 'unit') return token.value;
return React.createElement(Value, { key: token.type }, token.value);
}));
}function DurationMessage({ intl, seconds, format, textComponent, valueComponent, ...otherProps }: Props) {
let actualFormat = intl.messages[`react-intl-formatted-duration/custom-format/${format || ''}`] || format;
if (!format || format === EXTENDED_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.longFormatting'] || '{minutes} {seconds}';
}
if (format === TIMER_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.timerFormatting'] || '{minutes}:{seconds}';
}
const parts = new DurationUnitFormat(intl.locale, {
format: actualFormat,
formatUnits: {
[DurationUnitFormat.units.DAY]: intl.messages['react-intl-formatted-duration.daysUnit'] || '{value, plural, one {day} other {days}}',
[DurationUnitFormat.units.HOUR]: intl.messages['react-intl-formatted-duration.hoursUnit'] || '{value, plural, one {hour} other {hours}}',
[DurationUnitFormat.units.MINUTE]: intl.messages['react-intl-formatted-duration.minutesUnit'] || '{value, plural, one {minute} other {minutes}}',
[DurationUnitFormat.units.SECOND]: intl.messages['react-intl-formatted-duration.secondsUnit'] || '{value, plural, one {second} other {seconds}}',
},
formatDuration: intl.messages['react-intl-formatted-duration.duration'] || '{value} {unit}',
round: true, // TODO backward compatible, add a prop to configure it
style: format === TIMER_FORMAT ? DurationUnitFormat.styles.TIMER : DurationUnitFormat.styles.CUSTOM,
}).formatToParts(seconds);
const Text = textComponent || intl.textComponent;
const Value = valueComponent || textComponent || intl.textComponent;
return React.createElement(Text, otherProps, parts.map((token) => {
if (token.type === 'literal' || token.type === 'unit') return token.value;
return React.createElement(Value, { key: token.type }, token.value);
}));
}function DurationMessage({ intl, seconds, format, textComponent, valueComponent, ...otherProps }: Props) {
let actualFormat = intl.messages[`react-intl-formatted-duration/custom-format/${format || ''}`] || format;
if (!format || format === EXTENDED_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.longFormatting'] || '{minutes} {seconds}';
}
if (format === TIMER_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.timerFormatting'] || '{minutes}:{seconds}';
}
const parts = new DurationUnitFormat(intl.locale, {
format: actualFormat,
formatUnits: {
[DurationUnitFormat.units.DAY]: intl.messages['react-intl-formatted-duration.daysUnit'] || '{value, plural, one {day} other {days}}',
[DurationUnitFormat.units.HOUR]: intl.messages['react-intl-formatted-duration.hoursUnit'] || '{value, plural, one {hour} other {hours}}',
[DurationUnitFormat.units.MINUTE]: intl.messages['react-intl-formatted-duration.minutesUnit'] || '{value, plural, one {minute} other {minutes}}',
[DurationUnitFormat.units.SECOND]: intl.messages['react-intl-formatted-duration.secondsUnit'] || '{value, plural, one {second} other {seconds}}',
},
formatDuration: intl.messages['react-intl-formatted-duration.duration'] || '{value} {unit}',
round: true, // TODO backward compatible, add a prop to configure it
style: format === TIMER_FORMAT ? DurationUnitFormat.styles.TIMER : DurationUnitFormat.styles.CUSTOM,
}).formatToParts(seconds);
const Text = textComponent || intl.textComponent;
const Value = valueComponent || textComponent || intl.textComponent;
return React.createElement(Text, otherProps, parts.map((token) => {
if (token.type === 'literal' || token.type === 'unit') return token.value;actualFormat = intl.messages['react-intl-formatted-duration.longFormatting'] || '{minutes} {seconds}';
}
if (format === TIMER_FORMAT) {
actualFormat = intl.messages['react-intl-formatted-duration.timerFormatting'] || '{minutes}:{seconds}';
}
const parts = new DurationUnitFormat(intl.locale, {
format: actualFormat,
formatUnits: {
[DurationUnitFormat.units.DAY]: intl.messages['react-intl-formatted-duration.daysUnit'] || '{value, plural, one {day} other {days}}',
[DurationUnitFormat.units.HOUR]: intl.messages['react-intl-formatted-duration.hoursUnit'] || '{value, plural, one {hour} other {hours}}',
[DurationUnitFormat.units.MINUTE]: intl.messages['react-intl-formatted-duration.minutesUnit'] || '{value, plural, one {minute} other {minutes}}',
[DurationUnitFormat.units.SECOND]: intl.messages['react-intl-formatted-duration.secondsUnit'] || '{value, plural, one {second} other {seconds}}',
},
formatDuration: intl.messages['react-intl-formatted-duration.duration'] || '{value} {unit}',
round: true, // TODO backward compatible, add a prop to configure it
style: format === TIMER_FORMAT ? DurationUnitFormat.styles.TIMER : DurationUnitFormat.styles.CUSTOM,
}).formatToParts(seconds);
const Text = textComponent || intl.textComponent;
const Value = valueComponent || textComponent || intl.textComponent;
return React.createElement(Text, otherProps, parts.map((token) => {
if (token.type === 'literal' || token.type === 'unit') return token.value;
return React.createElement(Value, { key: token.type }, token.value);
}));
}intl-unofficial-duration-unit-format
Unofficial implementation of duration UnitFormat
