Plural

The plural component is used to create a message which changes a noun based on the numeric input. Different locales have different rules for plurality. For instance, in English there are two types of plurals:

1. One e.g. 1 apple
2. Other e.g. 0 apples, 4 apples

However, in Russian there are several different plural rules.

1. Numbers ending in 1 (except 11) e.g. одна девушка - one girl
2. Numbers ending in 2,3,4 (except 12, 13, 14) e.g. три собаки - three dogs
3. Numbers ending in : 5,6,7,8,9,0 (and the exceptions above) e.g. девять собак - nine dogs
4. Genitive Case (possessive pluralization). (Lots of rules)
5. General Case.

Managing all these cases is difficult. Fortunately, we have the Plural component that handles all of this for us

Basic Usage

import \* as React from 'react'
import { Plural } from '@patreon/stele'
function MyComponent(props) {
return (
<Text intl>
    {props.userName} has
    <Plural value={props.appleCount} one="an apple" other="# apples" />
</Text>
) }

Props

Example message

{userName} has {appleCount, plural,
    one {apple}
    other {# apples}
}

Playground

() => {
  const [count, setCount] = React.useState(1)
  return (
    <>
      <div>
        <input
          value={count}
          onChange={e => setCount(e.target.value)}
          type="number"
        />
      </div>
      <p>
        The apple picker has
        <Plural
          value={count}
          zero="no apples"
          one="an apple"
          other="# apples"
        />
      </p>
    </>
  )
}