Price

Price converts the pence prop to the specified currency and outputs it as formatted text. If true the wholeNumber prop rounds this up to the largest integer and displays that alone. It is primarily an abstraction of themoney() function from helpers/money.ts, designed to save parent components making calls to the next router for user locale data. While money() can be used directly this is discouraged.

PriceWrapper and PriceText are styling wrappers that can be used in conjunction to style sections of pricing text individually. All of these components can be passed the fontStyle andcolor props.

Examples

Price

<Grid gridGap={2}>
  <Price pence={750} currency="gbp" />
  <Price pence={750} currency="gbp" wholeNumber="true" />
  <Price pence={750} currency="gbp" fontStyle="h3" color="secondary" strike="true"/>
</Grid>

PriceWrapper

<Grid gridGap={2}>
  <PriceWrapper>
    <Price pence={899} currency="gbp"/>
    <PriceText fontStyle="p3"> / person</PriceText>
  </PriceWrapper>
  <PriceWrapper fontStyle="h5">
    <PriceText color="secondary" fontStyle="p4">From </PriceText>
    <Price pence={899} currency="gbp" wholeNumber={true} />
    <PriceText fontStyle="h5">pp</PriceText>
  </PriceWrapper>
</Grid>