# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gérer les paramètres régionaux
URL: https://generaltranslation.com/fr/docs/react/guides/managing-locales.mdx
---

title: Gérer les paramètres régionaux
description: Comment configurer les paramètres régionaux prises en charge, créer un sélecteur de langue React et lire ou modifier le paramètre régional actif.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Les codes de langue tels que `en-US` et `fr` associent le choix de langue d’un utilisateur aux traductions et aux règles de formatage appropriées.

Déclarez les paramètres régionaux prises en charge par votre application, permettez aux utilisateurs d’en choisir un et consultez le paramètre régional actif lorsque votre UI doit adapter son comportement à la langue.

## Comprendre l’état des paramètres régionaux [#locale-state]

* **Paramètre régional par défaut :** la langue dans laquelle votre contenu source est rédigé et le dernier recours lorsqu’aucun paramètre régional pris en charge ne correspond.
* **Paramètres régionaux pris en charge :** tous les paramètres régionaux qu’un utilisateur peut choisir, y compris le paramètre régional par défaut et les paramètres régionaux cibles.
* **Paramètre régional actif :** le paramètre régional pris en charge sélectionné à partir de l’URL, d’une préférence enregistrée, des paramètres du navigateur ou de la valeur par défaut.

## Déclarez les paramètres régionaux prises en charge [#declare]

Définissez [`defaultLocale`](/docs/react/reference/config#default-locale) et indiquez vos [`locales`](/docs/react/reference/config#locales) cibles dans `gt.config.json` :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

Dans React, TanStack Start et React Native, passez ces valeurs à l’appel d’initialisation. Dans Next.js, [`withGTConfig`](/docs/react/nextjs/config) lit automatiquement `gt.config.json`. Consultez [Configurer General Translation](/docs/react/guides/configuring) pour la procédure propre à chaque environnement.

## Ajouter un sélecteur de langue [#switcher]

Choisissez l’approche la plus simple adaptée à votre interface :

* Utilisez [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) pour ajouter une liste déroulante prête à l’emploi dans React, Next.js ou TanStack Start.
* Utilisez [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) pour créer un sélecteur de langue personnalisé dans n’importe quel framework pris en charge.
* Utilisez [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) pour créer un bouton ou un autre contrôle permettant de basculer vers un paramètre régional prédéfini.

### Utiliser le sélecteur prêt à l’emploi

Affichez [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) dans un composant client. Sans props, il liste tous les paramètres régionaux configurés et change le paramètre régional actif lorsque l’utilisateur en sélectionne un.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { LocaleSelector } from 'gt-react';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { LocaleSelector } from 'gt-next';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { LocaleSelector } from 'gt-tanstack-start';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="React Native">
    *Remarque : React Native n’exporte pas [`<LocaleSelector>`](/docs/react/reference/components/locale-selector). Créez un sélecteur personnalisé avec [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector), comme indiqué ci-dessous.*
  </Tab>
</Tabs>

### Créer un sélecteur de langue personnalisé

[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) fournit le paramètre régional actif, les paramètres régionaux disponibles, une fonction de définition et des noms d’affichage localisés dans un seul hook. Utilisez les contrôles de votre framework :

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useLocaleSelector } from 'gt-react';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    'use client';

    import { useLocaleSelector } from 'gt-next';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useLocaleSelector } from 'gt-tanstack-start';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { Button, View } from 'react-native';
    import { useLocaleSelector } from 'gt-react-native';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <View>
          {locales.map((localeCode) => (
            <Button
              key={localeCode}
              title={getLocaleProperties(localeCode).nativeNameWithRegionCode}
              disabled={localeCode === locale}
              onPress={() => setLocale(localeCode)}
            />
          ))}
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

Si vous avez seulement besoin d’une action directe dans une application web React, appelez [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) :

```tsx
import { useSetLocale } from 'gt-react';

function FrenchButton() {
  const setLocale = useSetLocale();
  return <button onClick={() => setLocale('fr')}>Français</button>;
}
```

## Conserver et acheminer les choix de paramètre régional [#persistence]

Modifier le paramètre régional via [`<LocaleSelector>`](/docs/react/reference/components/locale-selector), [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) ou [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) enregistre ce choix et applique les nouvelles traductions différemment selon le framework :

* **React :** enregistre le paramètre régional dans un cookie, puis recharge la page par défaut. Un callback personnalisé de rechargement du provider peut remplacer le rechargement complet de la page.
* **Next.js App Router :** enregistre le paramètre régional dans un cookie, puis actualise l’arborescence des composants serveur. Le middleware de paramètre régional applique tout routage de chemin configuré.
* **Next.js Pages Router :** enregistre le paramètre régional dans un cookie. Configurez le callback de rechargement du provider pour naviguer avec le Pages Router et récupérer les props de page du paramètre régional sélectionné.
* **TanStack Start :** enregistre le paramètre régional dans un cookie, puis recharge la page. Lorsque [`localeRouting`](/docs/react/reference/config#locale-routing) est activé, il navigue vers le pathname du paramètre régional correspondant.
* **React Native :** enregistre le paramètre régional dans le stockage natif (ou dans `localStorage` sur React Native Web), met à jour l’état du provider, charge les traductions du paramètre régional et effectue un nouveau rendu sans navigation dans le navigateur.

Pour les pages publiques, les URL basées sur le paramètre régional rendent chaque version linguistique partageable et indexable. Configurez le routage dans le guide spécifique au framework :

* [Middleware de l’App Router de Next.js](/docs/react/nextjs/app-router-middleware)
* [Routage par paramètre régional du Pages Router de Next.js](/docs/react/nextjs/pages-router-middleware)
* [Routage par paramètre régional de TanStack Start](/docs/react/tanstack-start/setup#locale-routing)

## Lire le paramètre régional actif [#read]

Utilisez des hooks de paramètres régionaux lors de l’affichage d’une UI propre à une langue :

* [`useLocale`](/docs/react/reference/hooks/use-locale) renvoie le code de langue du paramètre régional actif.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) renvoie le paramètre régional source.
* [`useLocales`](/docs/react/reference/hooks/use-locales) renvoie tous les codes de langue des paramètres régionaux prises en charge.
* [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) renvoie `'ltr'` ou `'rtl'` pour la mise en page.
* [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) renvoie le nom d&#39;un paramètre régional, son nom natif, sa région, son script et d’autres métadonnées d’affichage.

*Remarque : `gt-tanstack-start` n’exporte actuellement ni [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) ni [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties). Récupérez plutôt les métadonnées du paramètre régional avec [`getLocaleProperties`](/docs/platform/core/reference/utility-functions/locales/get-locale-properties) depuis `generaltranslation`.*

Dans Next.js, ces hooks fonctionnent dans les composants serveur synchrones d’App Router. Dans les composants asynchrones, appelez [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) et [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) depuis `gt-next/server` :

```tsx
import { getLocale, getLocaleDirection } from 'gt-next/server';

async function Layout() {
  const locale = await getLocale();
  const dir = await getLocaleDirection();
  return <html lang={locale} dir={dir} />;
}
```

Consultez la page de référence de [`useLocale`](/docs/react/reference/hooks/use-locale) pour en savoir plus sur la correspondance des paramètres régionaux et le comportement du contenu de secours.
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/configuring
- /docs/react/guides/storing-translations