Introducción

Lingo.dev proporciona múltiples formas de cambiar entre idiomas en tu aplicación. Puedes usar el componente integrado <LocaleSwitcher /> o crear selectores personalizados utilizando los hooks useLingoLocale() y setLingoLocale().

LocaleSwitcher integrado

El componente <LocaleSwitcher /> es una solución prediseñada que gestiona automáticamente el cambio de idioma con una interfaz desplegable.

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

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

El LocaleSwitcher automáticamente:

Muestra los idiomas disponibles
Indica el idioma activo actual
Gestiona el cambio de idioma cuando se selecciona una nueva opción

Selectores de idioma personalizados

Para un mayor control sobre la interfaz de usuario y el comportamiento, puedes crear selectores de idioma personalizados utilizando los hooks useLingoLocale() y setLingoLocale().

Select

Un componente desplegable de selección que proporciona una interfaz limpia y nativa de selección HTML para cambiar de idioma. Puedes utilizar tus propios estilos CSS para que coincidan con el diseño de tu aplicación.

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>
  );
}

Botones

Un selector basado en botones con emojis de banderas y diseño responsive que proporciona retroalimentación visual para el idioma activo.

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>
  );
}

Estilización con bibliotecas de diseño

Con los hooks puedes estilizar tus selectores de idioma personalizados utilizando cualquier biblioteca de diseño que ya tengas en tu proyecto.

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>
  );
}

Esto te permite mantener patrones de diseño consistentes en toda tu aplicación mientras construyes funcionalidad personalizada para cambiar de idioma.

Cambio de idiomas