Stele - Numbers

Components

Currency Dates and Times Numbers Basic Usage Example message Props Playground Plural Select Select Ordinal

How To

Number

Numbers do not change between locales, but how they are formatted does change. Not only that, but numbers change the translation context. A word might be translated differently if it comes after a number. Therefore, stele understands how to turn these numbers in to ICU messages for our compiler.

Basic Usage

import * as React from 'react'
import { Percent, Decimal } from '@patreon/stele'
function MyComponent(props) {
    return (
        <Text intl>
            <p>
                We have <Decimal value={dauAverage} /> DAU
            </p>
            <p>
                They are <Percent value={appleFractionDecimal} /> likely to buy
                a widget
            </p>
        </Text>
    )
}

Example message

{
    dauAverage, number, decimal
}

Props

value

Number

required

maximumFractionDigits

Number | undefined

maximumSignificantDigits

Number | undefined

minimumFractionDigits

Number | undefined

minimumIntegerDigits

Number | undefined

minimumSignificantDigits

Number | undefined

Playground

100%
1
$ 1.00

() => {
  const [count, setCount] = React.useState(1)
  return (
    <>
      <div>
        <input
          value={count}
          onChange={e => setCount(e.target.value)}
          type="number"
        />
      </div>
      <Percent value={count} />
      <br />
      <Decimal value={count} />
      <br />
      $
      <Decimal
        value={count}
        minimumFractionDigits={2}
        maximumFractionDigits={2}
        minimumIntegerDigits={1}
      />
    </>
  )
}() => {
  const [count, setCount] = React.useState(1)
  return (
    <>
      <div>
        <input
          value={count}
          onChange={e => setCount(e.target.value)}
          type="number"
        />
      </div>
      <Percent value={count} />
      <br />
      <Decimal value={count} />
      <br />
      $
      <Decimal
        value={count}
        minimumFractionDigits={2}
        maximumFractionDigits={2}
        minimumIntegerDigits={1}
      />
    </>
  )
}