Introduction

Lingo.dev provides multiple ways to switch between locales in your application. You can use the built-in <LocaleSwitcher /> component or create custom switchers using the useLingoLocale() and setLingoLocale() hooks.

Built-in LocaleSwitcher

The <LocaleSwitcher /> component is a pre-built solution that automatically handles locale switching with a dropdown interface.

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

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

The LocaleSwitcher automatically:

Displays available locales
Shows the current active locale
Handles locale switching when a new option is selected

Custom Locale Switchers

For more control over the UI and behavior, you can build custom locale switchers using the useLingoLocale() and setLingoLocale() hooks.

Select

A dropdown select component that provides a clean, native HTML select interface for locale switching. You can use your own CSS styles to match the design of your 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>
  );
}

Buttons

A button-based switcher with flag emojis and responsive design that provides visual feedback for the active locale.

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

Styling with Design Libraries

With hooks you can style your custom locale switchers using any design library you already have in your project.

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

This allows you to maintain consistent design patterns across your application while building custom locale switching functionality.

Switching Locales