# General Translation Knowledge Base: Comment gérer les formes plurielles dans React ? URL: https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: Pour gérer les formes plurielles dans React, fournissez à chaque langue une phrase par forme du pluriel et sélectionnez-la selon les règles de pluriel de cette langue, car l’anglais compte 2 formes, le russe 4 et l’arabe 6. Le composant `` de General Translation, disponible dans gt-react et gt-next, prend vos formes source, et General Translation génère les formes requises par chaque langue cible. Category: Formatage selon les paramètres régionaux Last updated: 2026-10-21 Authors: Archie McKenzie Published: 2025-02-17 Pour gérer les formes plurielles dans React, fournissez à chaque langue une phrase par forme du pluriel, puis choisissez la phrase adaptée à chaque nombre selon les règles de pluriel de cette langue. L’API native de JavaScript [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) se charge de ce choix : elle associe un nombre à une catégorie de pluriel définie par le CLDR d’Unicode (Common Locale Data Repository). L’anglais compte 2 catégories, le russe et le polonais 4, l’arabe 6 et le japonais 1. Un test `count === 1` ne convient qu’à l’anglais. Le russe utilise trois formes pour les nombres entiers, « 1 файл », « 2 файла » et « 5 файлов » (1 fichier, 2 fichiers, 5 fichiers), et 21 prend la même forme que 1. Un test qui affiche « файл » pour 1 et « файлов » pour tous les autres nombres produit « 2 файлов » et « 21 файлов », deux formes incorrectes. ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## Quelles sont les catégories de pluriel de chaque langue ? Le CLDR définit six catégories de pluriel : `zero`, `one`, `two`, `few`, `many` et `other`. Chaque langue en utilise un sous-ensemble, et ses règles rattachent chaque nombre à une seule catégorie de ce sous-ensemble. | Langue | Catégories | Nombres associés à chaque catégorie | | ----------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Anglais | `one`, `other` | 1 relève de `one` ; 0, 2, 5 et 1,5 relèvent de `other` | | Japonais, chinois | `other` | Tous les nombres relèvent de `other` | | Russe | `one`, `few`, `many`, `other` | 1, 21 et 101 relèvent de `one` ; 2 à 4 et 22 relèvent de `few` ; 0, 5 à 20 et 100 relèvent de `many` ; 1,5 relève de `other` | | Polonais | `one`, `few`, `many`, `other` | 1 relève de `one` ; 2 à 4 et 22 relèvent de `few` ; 0, 5 à 21 et 100 relèvent de `many` ; 1,5 relève de `other` | | Arabe | `zero`, `one`, `two`, `few`, `many`, `other` | 0 relève de `zero` ; 1 relève de `one` ; 2 relève de `two` ; 3 à 10 relèvent de `few` ; 11 à 99 relèvent de `many` ; 100 à 102 relèvent de `other` | Pour obtenir la liste des catégories d'une langue, exécutez `new Intl.PluralRules('ru').resolvedOptions().pluralCategories` dans la console d'un navigateur. Pour le russe, cette instruction renvoie `one`, `few`, `many` et `other`. ## Comment gérer les formes plurielles dans une application React multilingue ? General Translation gère les formes plurielles dans React grâce au composant [``](/docs/react/reference/components/plural) de `gt-react`, ou de `gt-next` dans Next.js. Vous rédigez les formes propres à votre langue source, et General Translation génère celles dont chaque langue cible a besoin. 1. Passez le nombre à [``](/docs/react/reference/components/plural) via `n`, avec une prop par forme source, par exemple `one` et `other` pour l'anglais. 2. Encapsulez le nombre dans [``](/docs/react/reference/components/num) et l'ensemble du composant [``](/docs/react/reference/components/plural) dans [``](/docs/react/reference/components/t), afin que chaque forme soit traduite comme une phrase complète, le nombre étant traité comme une variable. 3. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) avant votre compilation de production. General Translation traduit chaque forme et ajoute les catégories utilisées par chaque langue cible : l'arabe obtient ainsi six formes, et le russe quatre. ```tsx import { T, Plural, Num } from 'gt-react'; export function InboxCount({ count }: { count: number }) { return ( You have {count} message.} other={<>You have {count} messages.} /> ); } ``` Au moment de l'affichage, le composant [``](/docs/react/reference/components/plural) de General Translation choisit la forme correspondant à `count` selon les [règles de pluriel CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) de la locale active. Si cette catégorie est absente, il se rabat sur `plural`, puis sur `other`, et enfin sur ses éléments enfants. [``](/docs/react/reference/components/num) formate le nombre localement avec `Intl.NumberFormat` : 1000000 s'affiche ainsi 1,000,000 en anglais, 1.000.000 en allemand et 10,00,000 en hindi, et la valeur n'est jamais envoyée à l'API de General Translation. Pour que les messages au pluriel restent traduits à mesure que le texte évolue, exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) dans votre CI, ou [configurez Locadex](/docs/platform/locadex/guides/configuring-automations), l'agent IA de General Translation, afin qu'il traduise le nouveau contenu source dès qu'une pull request est modifiée ou qu'un commit est poussé. Les relecteurs peuvent corriger n'importe quelle forme générée dans l'[Éditeur de Traduction](/docs/platform/dashboard/guides/reviewing-translations) du tableau de bord de General Translation. Le guide [Gérer les formes plurielles et les branches](/docs/react/guides/handling-plurals-and-branches) détaille les étapes pour React, Next.js, ainsi que pour les bibliothèques expérimentales `gt-tanstack-start` et `gt-react-native`. ## Comment gérer le pluriel d'une chaîne de caractères dans une application React uniquement en anglais ? Une application disponible uniquement en anglais n'a besoin que de deux formes, `one` et `other` : un petit utilitaire suffit donc. Passez des phrases complètes, pour que les noms irréguliers ("person" et "people") et les verbes ("is" et "are") s'accordent avec le nombre. ```ts title="pluralize.ts" const englishPlurals = new Intl.PluralRules('en-US'); export function pluralize(count: number, one: string, other: string): string { return englishPlurals.select(count) === 'one' ? one : other; } ``` ```tsx import { pluralize } from './pluralize'; export function CartSummary({ items, viewers }: { items: number; viewers: number }) { return ( <> {/* 1 article, 5 articles */}

{pluralize(items, `${items} item`, `${items} items`)}

{/* 1 personne regarde, 3 personnes regardent */}

{pluralize(viewers, '1 person is watching', `${viewers} people are watching`)}

); } ``` En anglais, 0 relève de la catégorie `other` : l'utilitaire affiche donc "0 items". Comme il code en dur les règles de l'anglais et n'accepte que deux formes, alors que le russe en exige trois, remplacez-le par [``](/docs/react/reference/components/plural) ou par une autre bibliothèque d'internationalisation (i18n) dès que l'application prend en charge une deuxième langue. ## Comment gérer le pluriel d'une chaîne de caractères en dehors du JSX ? Pour un texte qui doit être une simple chaîne de caractères, comme un `placeholder` ou un `aria-label`, le hook [`useGT`](/docs/react/reference/hooks/use-gt) de General Translation renvoie une fonction qui accepte un message de pluriel ICU (International Components for Unicode). Dans le message, `#` affiche la valeur du compteur. ```tsx import { useGT } from 'gt-react'; export function ProductSearch({ count }: { count: number }) { const gt = useGT(); return ( ); } ``` Dans les composants asynchrones de l’App Router, utilisez plutôt [`getGT`](/docs/react/nextjs/reference/functions/get-gt), importé depuis `gt-next/server`. Le reste de l’API de traduction des chaînes est présenté dans [Traduction de chaînes](/docs/react/guides/translating-strings). ## Comment react-i18next et react-intl gèrent-ils les formes plurielles ? Les deux bibliothèques déterminent la catégorie à l'aide des règles de pluriel CLDR et lisent les phrases de chaque langue dans un fichier de catalogue : votre équipe ou vos traducteurs doivent donc rédiger chaque forme de chaque message dans chaque langue. Aucune des deux bibliothèques ne génère les traductions. [react-i18next](https://react.i18next.com/) stocke une clé par catégorie, suffixée par le nom de la catégorie, et sélectionne la clé en fonction de l'option `count`. ```json title="locales/en/translation.json" { "messages_one": "You have {{count}} message.", "messages_other": "You have {{count}} messages." } ``` ```tsx import { useTranslation } from 'react-i18next'; export function InboxCount({ count }: { count: number }) { const { t } = useTranslation(); return

{t('messages', { count })}

; } ``` Un fichier arabe nécessite six clés, de `messages_zero` à `messages_other`. La [documentation d'i18next sur les formes plurielles](https://www.i18next.com/translation-function/plurals) répertorie tous les suffixes. [react-intl](https://formatjs.github.io/docs/react-intl/), la bibliothèque React de FormatJS, regroupe toutes les catégories dans une seule chaîne ICU MessageFormat, où `#` représente le nombre formaté selon le paramètre régional. ```tsx import { FormattedMessage } from 'react-intl'; export function InboxCount({ count }: { count: number }) { return ( ); } ``` Un catalogue arabe reprend le message avec les branches `zero`, `one`, `two`, `few`, `many` et `other`. Le [guide de la syntaxe ICU de FormatJS](https://formatjs.github.io/docs/core-concepts/icu-syntax/) présente les branches de pluriel ainsi que les correspondances exactes comme `=0`. ## Quelle approche adopter pour les formes plurielles dans React ? | Approche | Emplacement des formes | Qui rédige les formes de chaque langue cible | | ----------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Un utilitaire `Intl.PluralRules` | Votre code, en anglais uniquement | Personne, puisque l'application est livrée dans une seule langue | | react-i18next | Des clés suffixées dans un fichier JSON par langue | Votre équipe ou des traducteurs | | react-intl | Des messages ICU dans un catalogue par langue | Votre équipe ou des traducteurs | | Le composant [``](/docs/react/reference/components/plural) de General Translation | Les formes dans votre langue source, en JSX | General Translation, lors de l'exécution de [`npx gt translate`](/docs/cli/reference/commands/translate) | Optez pour un utilitaire si l'application est livrée uniquement en anglais. Utilisez react-i18next ou react-intl seuls si votre équipe gère déjà des fichiers de catalogue et que des traducteurs rédigent chaque forme à la main. Choisissez le composant [``](/docs/react/reference/components/plural) de General Translation si l'application est livrée en plusieurs langues et que ses textes évoluent à chaque livraison : General Translation rédige alors les formes de chaque langue cible pour chaque nouveau message au pluriel. ## Questions fréquentes ### Comment afficher "No items" lorsque le nombre vaut 0 ? En anglais, les règles de pluralisation classent 0 dans `other` : un message qui ne contient que `one` et `other` affiche donc "0 items". Dans une chaîne de caractères, ajoutez une correspondance exacte pour zéro au message ICU que vous passez à [`useGT`](/docs/react/reference/hooks/use-gt) : ```tsx gt('{count, plural, =0 {No items} one {# item} other {# items}}', { count }); ``` En JSX, testez `count === 0` et affichez l’état vide dans un bloc [``](/docs/react/reference/components/t) distinct. ### Le composant Plural fonctionne-t-il avec Next.js ? Oui. Importez [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/t) et [``](/docs/react/reference/components/num) depuis `gt-next` : ils acceptent les mêmes props que dans `gt-react`. General Translation les propose également dans les packages expérimentaux `gt-tanstack-start` et `gt-react-native`. ### Avec quelles valeurs tester les formes plurielles ? Affichez chaque message pluriel avec les valeurs 0, 1, 2, 5, 11, 21 et 100 dans chaque locale cible. Ces valeurs couvrent toutes les catégories plurielles des nombres entiers en anglais, en russe, en polonais et en arabe. Ajoutez 1,5 pour couvrir la catégorie `other` en russe et en polonais. ## Related questions - [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx): Gardez la phrase entière et traduisez chacune de ses versions, car un ternaire la découpe en fragments qui perdent leur sens et leur place dans l’ordre des mots propre à chaque langue. General Translation y parvient avec `` à l’intérieur de ``, qui traduit la phrase d’un seul tenant. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Les bibliothèques gt-react et gt-next de General Translation permettent d’internationaliser React et Next.js sans clés de traduction ni fichier JSON par langue à maintenir. Le texte reste intégré au JSX, dans le composant ``, et la commande gt translate génère les traductions de chaque langue lors de la compilation, en s’appuyant sur le contexte de votre code. Locadex peut les tenir à jour via des pull requests. - [Quelle est la meilleure bibliothèque d’i18n pour une application React ?](https://generaltranslation.com/fr/kb/best-react-i18n-library.mdx): Les quatre principales bibliothèques d’i18n pour React sont gt-react de General Translation, react-i18next, Lingui et React Intl. Toutes les quatre affichent et formatent les traductions, mais seule gt-react les génère aussi, à partir du texte intégré directement dans votre JSX. Choisissez react-i18next pour conserver vos catalogues et plugins i18next, Lingui pour l’extraction vers des catalogues compilés, et React Intl pour FormatJS et ICU MessageFormat. ## Previous and next questions - Next question: [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.