Introduction

Lingo.dev propose plusieurs façons de changer de langue dans votre application. Vous pouvez utiliser le composant intégré <LocaleSwitcher /> ou créer des sélecteurs personnalisés en utilisant les hooks useLingoLocale() et setLingoLocale().

LocaleSwitcher intégré

Le composant <LocaleSwitcher /> est une solution préconçue qui gère automatiquement le changement de langue avec une interface déroulante.

import { LocaleSwitcher } from "@lingo.dev/react";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <LocaleSwitcher locales={["en", "es", "de", "fr"]} />
    </div>
  );
}

Le LocaleSwitcher automatiquement :

Affiche les langues disponibles
Montre la langue active actuelle
Gère le changement de langue lorsqu'une nouvelle option est sélectionnée

Sélecteurs de langue personnalisés

Pour un contrôle plus précis sur l'interface utilisateur et le comportement, vous pouvez créer des sélecteurs de langue personnalisés en utilisant les hooks useLingoLocale() et setLingoLocale().

Select

Un composant de sélection déroulante qui fournit une interface de sélection HTML native et épurée pour le changement de langue. Vous pouvez utiliser vos propres styles CSS pour correspondre au design de votre application.

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";

function CustomLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  return (
    <div className="locale-switcher">
      <select
        value={currentLocale}
        onChange={(e) => setLingoLocale(e.target.value)}
      >
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="de">German</option>
        <option value="fr">French</option>
      </select>
    </div>
  );
}

Boutons

Un sélecteur basé sur des boutons avec des émojis de drapeaux et un design responsive qui fournit un retour visuel pour la langue active.

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";

function ButtonLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { code: "en", name: "English", flag: "🇺🇸" },
    { code: "es", name: "Spanish", flag: "🇪🇸" },
    { code: "de", name: "German", flag: "🇩🇪" },
    { code: "fr", name: "French", flag: "🇫🇷" },
  ];

  return (
    <div className="flex gap-2">
      {locales.map((locale) => (
        <button
          key={locale.code}
          onClick={() => setLingoLocale(locale.code)}
          className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
            currentLocale === locale.code
              ? "bg-blue-500 text-white border-blue-500"
              : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
          }`}
          title={locale.name}
        >
          <span className="text-lg">{locale.flag}</span>
          <span className="hidden sm:inline">{locale.name}</span>
        </button>
      ))}
    </div>
  );
}

Stylisation avec les bibliothèques de design

Avec les hooks, vous pouvez styliser vos sélecteurs de langue personnalisés en utilisant n'importe quelle bibliothèque de design que vous avez déjà dans votre projet.

shadcn/ui

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

function ShadcnLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  return (
    <Select value={currentLocale} onValueChange={setLingoLocale}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select language" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="en">🇺🇸 English</SelectItem>
        <SelectItem value="es">🇪🇸 Spanish</SelectItem>
        <SelectItem value="de">🇩🇪 German</SelectItem>
        <SelectItem value="fr">🇫🇷 French</SelectItem>
      </SelectContent>
    </Select>
  );
}

HeroUI

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select, SelectItem } from "@heroui/react";

function HeroUILocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { key: "en", label: "🇺🇸 English" },
    { key: "es", label: "🇪🇸 Spanish" },
    { key: "de", label: "🇩🇪 German" },
    { key: "fr", label: "🇫🇷 French" },
  ];

  return (
    <Select
      label="Language"
      selectedKeys={[currentLocale]}
      onSelectionChange={(keys) => setLingoLocale(Array.from(keys)[0])}
      className="max-w-xs"
    >
      {locales.map((locale) => (
        <SelectItem key={locale.key}>{locale.label}</SelectItem>
      ))}
    </Select>
  );
}

Mantine

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select } from "@mantine/core";

function MantineLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = [
    { value: "en", label: "🇺🇸 English" },
    { value: "es", label: "🇪🇸 Spanish" },
    { value: "de", label: "🇩🇪 German" },
    { value: "fr", label: "🇫🇷 French" },
  ];

  return (
    <Select
      label="Language"
      value={currentLocale}
      onChange={setLingoLocale}
      data={locales}
      w={200}
    />
  );
}

Chakra UI

import { useLingoLocale, setLingoLocale } from "@lingo.dev/react";
import { Select, createListCollection } from "@chakra-ui/react";

function ChakraLocaleSwitcher() {
  const currentLocale = useLingoLocale();

  const locales = createListCollection({
    items: [
      { label: "🇺🇸 English", value: "en" },
      { label: "🇪🇸 Spanish", value: "es" },
      { label: "🇩🇪 German", value: "de" },
      { label: "🇫🇷 French", value: "fr" },
    ],
  });

  return (
    <Select.Root
      collection={locales}
      value={[currentLocale]}
      onValueChange={(e) => setLingoLocale(e.value[0])}
      size="sm"
    >
      <Select.HiddenSelect />
      <Select.Label>Language</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select language" />
        </Select.Trigger>
        <Select.IndicatorGroup>
          <Select.Indicator />
        </Select.IndicatorGroup>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          {locales.items.map((locale) => (
            <Select.Item item={locale} key={locale.value}>
              {locale.label}
              <Select.ItemIndicator />
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Positioner>
    </Select.Root>
  );
}

Cela vous permet de maintenir des modèles de conception cohérents dans votre application tout en créant des fonctionnalités personnalisées de changement de langue.

Changement de langue