Plurals

Imagine you wanted to translate a phrase that could be singular or plural. You could use a <Num> variable and render a translation conditionally, like:

"singular": <>I have one new message.</>
"plural": <>I have <Num/> new messages.</>

t(n === 1 ? 'singular' : 'plural')

However, some languages have forms which don't exist in English, like the Arabic dual (opens in a new tab). gt-react and gt-next generate plural forms automatically, language-by-language.

The full list of forms which the library allows plurals to take is an extension of JavaScript's Intl.PluralRules (opens in a new tab):

zero, one, two, few, many, other, singular, dual, plural

To indicate that an item is plural, use the <Plural> component and supply alternate forms with these names. For example:

// Will display "You have 1 new message" when n is 1,
// and "You have {n} new messages" when n is plural.
// May display dual, paucal, null forms in other languages.
{  
    "messages": (
        <Plural singular={<p>You have <Num/> new message.</p>}>
            <p>You have <Num/> new messages.</p>
        </Plural>
    )
}

Plurals require an n parameter in the t() function. In this example:

t('messages', { n: 1 }); // <p>You have 1 new message.</p>
t('messages', { n: 3 }); // <p>You have 3 new messages.</p>