Skip to main contentSkip to site searchSkip to component search
Honeycomb

currency

Props

Prop nameTypeDefaultDescription
valuenumberRequired

The currency value.

extraClassesstring | undefined

Injection in className.

codestring | undefined

The currency ISO code (e.g.: `EUR` for Euros, `USD` for United States Dollar).

symbolstring | undefined

Override or polyfill the currency symbol provided by Honeycomb.

localestring | undefined

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

display"symbol" | "code" | "narrowSymbol" | "name" | undefined

The currency display format.

supCentsboolean | undefined

Shows cents in superscript tags.

intlFormatOptionsNumberFormatOptions | undefined

Options forwarded to Intl.NumberFormat API. Intl.NumberFormat

innerRefRef<HTMLSpanElement> | undefined

React ref forwarded to the wrapping "span" element.

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

The currency inherits font size, style, weight and line height from parent element.

By default, the display (symbol) shows the currency symbol for Euros, and pulls the locale defined in the user's browser. The currency can be changed by passing the currency code as a prop.

You can show the cents in superscript with the supCents prop.

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

<>
  <Text><Currency value={1000.50} /></Text>
  <Text><Currency value={1000.50} code="USD" /></Text>
  <Text><Currency value={1000.50} code="BRL" supCents /></Text>
</>

You can also add a custom symbol for strange currencies, or override the symbol for whatever currency using the symbol prop.

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

<>
  <Text><Currency value={1000} code="BTC" /></Text>
  <Text><Currency value={1000} code="BTC" symbol="₿" /></Text>
</>

Language and country

You can provide the locale via prop.

This will be used to fetch the currency symbol and format the number according to the location and language.

The locale is user-defined by default (comes from OS and browser settings), defining the locale depends on the use-case.

For example, if the website is running on pre-defined en-US language it might make sense to provide locale="en-US" to the currency as well, so the numbers are formatted and the narrow-symbol is show as $.

If locale is en-CA, the narrow-symbol will be US$.

Canadian Dollars CA versus US:

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

<>
  <Text><Currency value={1000.50} code="CAD" locale="en-CA" /></Text>
  <Text><Currency value={1000.50} code="CAD" locale="en-US" /></Text>
</>

Liras in Turkey versus EU:

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

<>
  <Text><Currency value={1000.50} code="TRY" locale="tr-TR" /></Text>
  <Text><Currency value={1000.50} code="TRY" locale="en-EU" /></Text>
</>

Display "code":

  • Shows the currency code.
  • The code position depends on the selected language.
  • E.g.: French and German shows code and symbols to the right of the value.
import { Text, Currency } from '@flixbus/honeycomb-react';

<>
  <Text><Currency value={1000.50} code="BRL" display="code" /></Text>
  <Text><Currency value={1000.50} code="CAD" locale="fr-CA" display="code" /></Text>
</>

Display "narrowSymbol":

  • Shows only the currency symbol the the currency (e.g.: for USD will always show $ instead of US$).
  • Can be confusing if mixed currencies that use the same symbol are used together, use with caution.
  • For example, all currencies bellow are different dollars.
import { Text, Currency } from '@flixbus/honeycomb-react';

<>
<Text>
  <Currency value={1000.50} code="USD" display="narrowSymbol" />
</Text>
<Text>
  <Currency value={1000.50} code="CAD" display="narrowSymbol" />
</Text>
<Text>
  <Currency value={1000.50} code="AUD" display="narrowSymbol" />
</Text>
<Text>
  <Currency value={1000.50} code="NZD" display="narrowSymbol" />
</Text>
</>

Display "name":

  • Shows the localized currency name.
  • Since the currency component uses the Intl.NumberFormat API to generate these strings it is not possible to customize them via prop as they are provided by the browser.
import { Text, Currency } from '@flixbus/honeycomb-react';

<>
<Text>
  <Currency value={1000.50} code="USD" locale="en-US" display="name" />
</Text>
<Text>
  <Currency value={1000.50} code="USD" locale="de-DE" display="name" />
</Text>
<Text>
  <Currency value={1000.50} code="USD" locale="tr-TR" display="name" />
</Text>
<Text>
  <Currency value={1000.50} code="USD" locale="pt-BR" display="name" />
</Text>
</>

Practical examples:

import { Heading, Currency } from '@flixbus/honeycomb-react';

<Heading flushSpace size={1}>Günstige Fernbus-Reisen ab <Currency code="EUR" value={4.99} locale="de-DE" /></Heading>

import { ListWrapper, ListWrapperItem, Heading, Text, Grid, GridCol, Currency } from '@flixbus/honeycomb-react';
import { Icon, IconSeat, IconSeatFree } from '@flixbus/honeycomb-icons-react';

<ListWrapper>
  <ListWrapperItem Elem="button">
    <Grid align="center">
      <GridCol inline>
        <Icon InlineIcon={IconSeat} size={6} appearance="primary"/>
      </GridCol>
      <GridCol>
        <Heading flushSpace size={3}>Select your seat</Heading>
        <Text>From <Currency code="USD" locale="en-US" value={5.99} /></Text>
      </GridCol>
    </Grid>
  </ListWrapperItem>
  <ListWrapperItem Elem="button">
    <Grid align="center">
      <GridCol inline>
        <Icon InlineIcon={IconSeatFree} size={6} appearance="primary" />
      </GridCol>
      <GridCol>
        <Heading flushSpace size={3}>Travel neighbor-free</Heading>
        <Text><Currency code="USD" locale="en-US" value={15.99} /></Text>
      </GridCol>
    </Grid>
  </ListWrapperItem>
</ListWrapper>

import { ThemeWrapper, Box, Heading, Grid, GridCol, Divider, Currency } from '@flixbus/honeycomb-react';

<ThemeWrapper theme="kamil">
  <Box>
    <Grid align="center">
      <GridCol>
        1 Yetişkin
      </GridCol>
      <GridCol inline>
        <strong><Currency code="TRY" locale="tr-TR" value={479} /></strong>
      </GridCol>
    </Grid>
    <Grid align="center">
      <GridCol>
        1 Koltuk : 3
      </GridCol>
      <GridCol inline>
        <strong><Currency code="TRY" locale="tr-TR" value={0} /></strong>
      </GridCol>
    </Grid>
    <Divider extraClasses="hcr-space-2-top hcr-space-2-bottom" />
    <Heading size={2} Elem="strong" flushSpace>
      <Grid align="center">
        <GridCol>
          Toplam (KDV dahil)
        </GridCol>
        <GridCol inline>
          <Currency code="TRY" locale="tr-TR" value={479} />
        </GridCol>
      </Grid>
    </Heading>
  </Box>
</ThemeWrapper>

import { Box, Heading, Button, Grid, GridCol, Skeleton, Currency } from '@flixbus/honeycomb-react';
import { Icon, IconArrowRightL } from '@flixbus/honeycomb-icons-react';

<Box>
  <Grid>
    <GridCol>
      <Skeleton Elem="span" width="sm" height="md" style={{ display: 'inline-block', marginRight: 'var(--hcr-spacing-2)' }} />
      <Skeleton Elem="span" width="sm" height="md" style={{ display: 'inline-block' }} />
      <Skeleton Elem="div" width="lg" height="md" flushBottom />
    </GridCol>
    <GridCol inline>
      <Heading size={2} Elem="strong" sectionHeader style={{ textAlign: 'right' }}>
        <Currency locale="it-CH" display="code" code="CHF" value={46} supCents />
      </Heading>
      <Button appearance="secondary">
        Continua
        <Icon InlineIcon={IconArrowRightL} />
      </Button>
    </GridCol>
  </Grid>
</Box>