i18next Guide (WIP)

Plurals example

Locale: 

Change the counter below and watch the sentence update to use the appropriate grammatical number.

An item

1 item

Code

1import { useState } from 'react';
2import { withTranslation } from '../../i18n';
3import PropTypes from 'prop-types';
4
5const PluralsExample = ({ t }) => {
6  const [number, setNumber] = useState(1);
7
8  return (
9    <div>
10      <input
11        type="number"
12        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
13        defaultValue={number}
14      />
15      <p>{t('plurals:ambiguous', { count: number })}</p>
16      <p>{t('plurals:withNumber', { count: number })}</p>
17    </div>
18  );
19};
20
21PluralsExample.propTypes = {
22  t: PropTypes.func.isRequired,
23};
24
25export default withTranslation('plurals')(PluralsExample);
26

plurals/en.json

{
  "ambiguous": "An item",
  "ambiguous_plural": "Some items",
  "withNumber": "{{count}} item",
  "withNumber_plural": "{{count}} items"
}

plurals/de.json

{
  "ambiguous": "Ein Ding",
  "ambiguous_plural": "Einige Dinge",
  "withNumber": "{{count}} Ding",
  "withNumber_plural": "{{count}} Dinge"
}

plurals/ru.json

{
  "ambiguous_0": "кое-какие вещь",
  "ambiguous_1": "кое-какие вещи",
  "ambiguous_2": "кое-какие вещей",
  "withNumber_0": "{{count}} вещь",
  "withNumber_1": "{{count}} вещи",
  "withNumber_2": "{{count}} вещей"
}

Why?

  • Remember that even in English, it's not helpful to just stick an "s" at the end of every word to make it plural. For example "sheep" and "hooves" and "wellies".
  • In some languages, pluralization will affect articles or adjectives, not just the nouns!
  • In English we only have singular and plural, which may sound trivial, but other languages have different "grammatical numbers". For example, switch to Russian (ru), and notice the noun's suffix change between 0, 1, 2, and 5 items.
  • It should be noted that the _0, _1, and _2 suffixes in the Russian example relate to the group of quantities, and not the number of items being counted. For example, _1 for ru applies to quantities of 2, 3, 4, 22, 23, 24, 32, 33, 34, etc, and not 1 or singular.
  • For a guide for how to support individual languages' grammatical numbers, see https://jsfiddle.net/sm9wgLze.