Skip to main contentSkip to site searchSkip to component search
Honeycomb

duration

Since: ver.10.0.0

Props

Prop nameTypeDefaultDescription
innerRefRef<HTMLTimeElement> | undefined

React ref forwarded to the time element.

labelstring | undefined

Time label for accessibility. E.g.: "Old arrival time: " or "New arrival time: ".

wrapperRestDelHTMLAttributes<HTMLElement> | InsHTMLAttributes<HTMLElement> | undefined

Props forwarded to the wrapping element.

Elem"span" | "strong" | "del" | "ins" | undefined

The wrapping element.

localeLocalesArgument

The locale for number formatting. Used for `Intl.NumberFormat` API.

extraClassesstring | undefined

Custom class name for the `

display"short" | "narrow" | "long" | "digital" | undefinedshort

The duration display format.

durationPartial<Record<"hours" | "minutes" | "seconds", number>>Required

The duration object containing hors minutes and seconds in integer numbers. `{ hours: number, minutes: number, seconds: number }`

intlFormatOptionsNumberFormatOptions | undefined

Options forwarded to each individual part of the `Intl.NumberFormat` API. Intl.NumberFormat

Check the FormattersProvider if you're struggling with performance issues due to too many formatters.

The Duration component is a wrapper around the useDurationFormatter hook.

It allows to format a duration object like { hours: number, minutes: number, seconds: number } in a human readable format, and will handle rendering an accessible time element with the correct dateTime attribute according to the given duration prop.

The output format can be customized via the display prop.

By default, the Duration component will use the user's browser locale. If you want to use a different locale, you can pass it via the locale prop.

Displays

The display options are:

  • short (default) shows abbreviated units
  • narrow: shows only the abbreviated unit identifiers with limited white space
  • digital: formats in digital (timer) format with ":" separators and shows the unit of the largest value.
  • long: formats the duration names in long form

When the unit value is zero or null, it will be show as such.

Omitting the unit value will not show the unit.

Examples

The short format is the default, and is often used in the Connection component to show stop and transfer times:

import { Box, Connection, ConnectionTitle, ConnectionStop, ConnectionTime, Duration, DateTime } from '@flixbus/honeycomb-react';
import { Icon, IconArrowRightArcDots } from '@flixbus/honeycomb-icons-react';

<>
  <Connection title={<ConnectionTitle text="Wed 15 Mai, 2024" plusDays="+1 day" />}>
    <ConnectionStop station="Berlin Alexanderplatz" time="19:10" />
    <ConnectionStop
      station="Berlin Airport BER, T 1/2"
      time={
        <ConnectionTime time={(<><Duration label="Duration: " duration={{ minutes: 5 }} />{' '}<DateTime displayTime date={new Date('2016-10-17T19:50:00')} /></>)} />
      }
    />
    <ConnectionStop station="Halle" time="22:00" />
  </Connection>
  <Box small appearance="dimmed">
    <Icon InlineIcon={IconArrowRightArcDots} /> Transfer time: <Duration duration={{ hours: 5, minutes: 35 }} />
  </Box>
  <Connection>
    <ConnectionStop station="Halle" time="00:35" />
    <ConnectionStop
      station="Bayreuth main station"
      time={
        <ConnectionTime time={(<><Duration label="Duration: " duration={{ minutes: 5 }} />{' '}<DateTime displayTime date={new Date('2016-10-18T05:35:00')} /></>)} />
      }
    />
    <ConnectionStop
      station="Nuremberg"
      time={
        <ConnectionTime time={(<><Duration label="Duration: " duration={{ minutes: 10 }} />{' '}<DateTime displayTime date={new Date('2016-10-18T04:10:00')} /></>)} />
      }
    />
    <ConnectionStop station="Munich Fröttmaning" time="06:10" />
  </Connection>
</>

The digital display is commonly seen on the list of trips:

import { Grid, GridCol, Text, Heading, Time, Duration, Currency } from '@flixbus/honeycomb-react';

<Grid justify="center">
  <GridCol>
    <Time Elem="strong" label="Departs at:">04:45</Time>
    <Text>Berlin Alexanderplatz</Text>
  </GridCol>
  <GridCol extraClasses="duration-grid-col-example">
    <Duration label="Duration:" display="digital" duration={{ hours: 11, minutes: 15 }} extraClasses="digital-duration-example" />
  </GridCol>
  <GridCol>
    <Time Elem="strong" label="Arrives at:">16:00</Time>
    <Text>Munich Central Station</Text>
  </GridCol>
</Grid>

The long display will write down the full description of the duration for a very clear description, it might be useful to be used in Tooltips or when description the summary of the trip:

import { Text, Duration } from '@flixbus/honeycomb-react';

<>
  <Text>
    <strong>Your preferred language:</strong>
    {' '}
    <Duration display="long" duration={{ hours: 3, minutes: 30, seconds: 15 }} /> |
    <Duration display="long" duration={{ hours: 0, minutes: 30, seconds: 15 }} /> |
    <Duration display="long" duration={{ minutes: 30, seconds: 15 }} />
  </Text>
  <Text>
    <strong>French:</strong>
    {' '}
    <Duration locale="fr" display="long" duration={{ hours: 3, minutes: 30, seconds: 15 }} /> |
    <Duration locale="fr" display="long" duration={{ hours: 0, minutes: 30, seconds: 15 }} /> |
    <Duration locale="fr" display="long" duration={{ minutes: 30, seconds: 15 }} />
  </Text>
  <Text>
    <strong>Ukrainian:</strong>
    {' '}
    <Duration locale="uk" display="long" duration={{ hours: 3, minutes: 30, seconds: 15 }} /> |
    <Duration locale="uk" display="long" duration={{ hours: 0, minutes: 30, seconds: 15 }} /> |
    <Duration locale="uk" display="long" duration={{ minutes: 30, seconds: 15 }} />
  </Text>
</>