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

title: Gérer les locales
description: Comment permettre aux utilisateurs de changer de langue et de lire la locale active avec General Translation dans React, Next.js, TanStack Start et React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Votre application déclare les locales qu'elle prend en charge, permet aux utilisateurs d'en choisir une et lit la locale active pour adapter le rendu en conséquence. Ce guide couvre chacun de ces aspects.

## Déclarez les locales prises en charge [#declare]

Indiquez vos locales par défaut et cibles dans `gt.config.json`. Ce sont les locales entre lesquelles votre application peut basculer.

```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, le plugin `withGTConfig` lit automatiquement `gt.config.json`, il n’y a donc aucune initialisation manuelle à effectuer. Consultez [Configurer General Translation](/docs/react/guides/configuring) pour la procédure propre à chaque environnement.

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

Ajoutez [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) pour obtenir un menu déroulant prêt à l’emploi de vos locales prises en charge. Il change la locale active lorsque l’utilisateur en sélectionne une.

<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 ne fournit pas de composant `<LocaleSelector>` préconstruit. Créez le vôtre avec [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (ou [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) et [`useLocales`](/docs/react/reference/hooks/use-locales)), comme indiqué ci-dessous.*
  </Tab>
</Tabs>

Pour créer votre propre sélecteur, utilisez `useSetLocale` pour changer la locale et `useLocales` pour lister les options. Ces hooks sont disponibles dans tous les frameworks ; importez-les depuis le package de votre framework.

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

function Switcher() {
  const locale = useLocale();
  const locales = useLocales();
  const setLocale = useSetLocale();
  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => <option key={l} value={l}>{l}</option>)}
    </select>
  );
}
```

*Remarque : lorsque vous changez la locale, ce choix est conservé — dans un cookie sur le web (React, Next.js, TanStack Start) ou dans le stockage natif sur React Native — puis l’application se recharge afin que les nouvelles traductions s’affichent.*

## Lire la locale active [#read]

Utilisez des hooks pour lire l’état de la locale dans vos composants :

* [`useLocale`](/docs/react/reference/hooks/use-locale) renvoie le code de langue de la locale active.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) renvoie la locale source.
* [`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 les métadonnées d’affichage d’une locale, comme son nom.

*Remarque : `gt-tanstack-start` n’exporte actuellement ni `useLocaleDirection` ni `useLocaleProperties`. Récupérez plutôt les métadonnées de la locale avec `getLocaleProperties` depuis `generaltranslation`.*

Ces hooks fonctionnent dans les composants serveur synchrones d’App Router. Dans les composants App Router asynchrones, utilisez plutôt [`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} />;
}
```

*Remarque : dans Next.js, la détection de la locale au moment de la requête et sa persistance sont gérées par le middleware, comme indiqué dans les pages du framework Next.js.*

Consultez la [référence des hooks](/docs/react/reference/hooks/use-locale) pour obtenir la liste complète.
## Next steps

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