소개

Lingo.dev는 애플리케이션에서 로케일을 전환하는 여러 방법을 제공합니다. 내장된 <LocaleSwitcher /> 컴포넌트를 사용하거나 useLingoLocale() 및 setLingoLocale() 훅을 사용하여 커스텀 스위처를 만들 수 있습니다.

내장된 LocaleSwitcher

<LocaleSwitcher /> 컴포넌트는 드롭다운 인터페이스로 로케일 전환을 자동으로 처리하는 사전 구축된 솔루션입니다.

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

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

LocaleSwitcher는 자동으로 다음을 수행합니다:

사용 가능한 로케일 표시
현재 활성화된 로케일 표시
새 옵션이 선택되었을 때 로케일 전환 처리

커스텀 로케일 스위처

UI와 동작에 대한 더 많은 제어를 위해 useLingoLocale() 및 setLingoLocale() 훅을 사용하여 커스텀 로케일 스위처를 구축할 수 있습니다.

셀렉트

로케일 전환을 위한 깔끔한 네이티브 HTML 선택 인터페이스를 제공하는 드롭다운 선택 컴포넌트입니다. 애플리케이션 디자인에 맞게 자체 CSS 스타일을 사용할 수 있습니다.

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

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

버튼

국기 이모지와 반응형 디자인을 갖춘 버튼 기반 전환기로, 활성 로케일에 대한 시각적 피드백을 제공합니다.

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

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

디자인 라이브러리를 사용한 스타일링

훅을 사용하면 프로젝트에 이미 있는 디자인 라이브러리를 활용하여 커스텀 로케일 스위처의 스타일을 지정할 수 있습니다.

shadcn/ui

import { useLingoLocale, setLingoLocale } from "lingo.dev/react/client";
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/client";
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/client";
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/client";
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>
  );
}

이를 통해 애플리케이션 전체에서 일관된 디자인 패턴을 유지하면서 커스텀 로케일 전환 기능을 구축할 수 있습니다.

로케일 전환하기

소개