Stele - Select Ordinal

Components

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

How To

SelectOrdinal

Ordinal numbers are a type of number that denotes order. For example First I ate dinner. But if that number is dynamic and maybe relies on a noun, then the cases get much more complicated. Fortunately, Stele makes it easy for us to do this.

Basic Usage

import * as React from 'react'
import { SelectOrdinal } from '@patreon/stele'
function MyComponent(props) {
    return (
        <Text intl>
            Rent is due on the
            <SelectOrdinal
                value={props.dayNum}
                one="#st"
                two="#nd"
                few="#rd"
                other="#th"
            />
        </Text>
    )
}

Example message

{dayNum, selectordinal,
    one {#st}
    two {#nd}
    few {#rd}
    other {#th}
}

Props

value

Number

required

zero

String | undefined

one

String | undefined

two

String | undefined

few

String | undefined

many

String | undefined

other

String | undefined

Playground

Rent is due on the 1st

() => {
  const [count, setCount] = React.useState(1)
  return (
    <>
      <div>
        <input
          min={1}
          max={31}
          value={count}
          onChange={e => setCount(e.target.value)}
          type="number"
        />
      </div>
      Rent is due on the
      <SelectOrdinal
        value={count}
        one="#st"
        two="#nd"
        few="#rd"
        other="#th"
      />
    </>
  )
}() => {
  const [count, setCount] = React.useState(1)
  return (
    <>
      <div>
        <input
          min={1}
          max={31}
          value={count}
          onChange={e => setCount(e.target.value)}
          type="number"
        />
      </div>
      Rent is due on the
      <SelectOrdinal
        value={count}
        one="#st"
        two="#nd"
        few="#rd"
        other="#th"
      />
    </>
  )
}

SelectOrdinal

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Example message

Props

Playground

Basic Usage