Home/i18nexus/useLanguageSwitcher

useLanguageSwitcher

React hook for language switching and management

🎮Interactive Demo

Current Language: en

💡 Try switching languages. It's automatically saved to cookies!

Overview

useLanguageSwitcheris a React hook that manages current language state and provides language switching functionality.

✓Query current language state

✓Dynamic Language Switching

✓Query available languages list

✓Automatic cookie saving

API Reference

Return Value

currentLanguage: string

The currently active language code.

const { currentLanguage } = useLanguageSwitcher();
console.log(currentLanguage); // "ko" or "en"

changeLanguage: (code: string) => void

Function to change language. The changed language is automatically saved to cookies.

const { changeLanguage } = useLanguageSwitcher();

// 언어 변경
changeLanguage("en");
changeLanguage("ko");

availableLanguages: Language[]

List of available languages.

const { availableLanguages } = useLanguageSwitcher();

// Language 타입:
// { code: string, name: string, flag?: string }

availableLanguages.map(lang => (
  <button onClick={() => changeLanguage(lang.code)}>
    {lang.flag} {lang.name}
  </button>
))

Usage Examples

Basic Usage

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function LanguageSelector() {
  const { currentLanguage, changeLanguage, availableLanguages } =
    useLanguageSwitcher();

  return (
    <div>
      <p>현재 언어: {currentLanguage}</p>

      {availableLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
        >
          {lang.name}
        </button>
      ))}
    </div>
  );
}

Dropdown selector

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function LanguageDropdown() {
  const { currentLanguage, changeLanguage, availableLanguages } =
    useLanguageSwitcher();

  return (
    <select
      value={currentLanguage}
      onChange={(e) => changeLanguage(e.target.value)}
      className="px-4 py-2 rounded-lg bg-slate-800 text-white"
    >
      {availableLanguages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.flag} {lang.name}
        </option>
      ))}
    </select>
  );
}

Advanced Example - With Flags

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function FancyLanguageSwitcher() {
  const { currentLanguage, changeLanguage, availableLanguages } =
    useLanguageSwitcher();

  return (
    <div className="flex gap-2">
      {availableLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
          className={`px-4 py-2 rounded-lg transition-all ${
            currentLanguage === lang.code
              ? "bg-blue-600 text-white scale-105"
              : "bg-slate-800 text-slate-300 hover:bg-slate-700"
          }`}
        >
          <span className="text-xl mr-2">{lang.flag}</span>
          <span>{lang.name}</span>
        </button>
      ))}
    </div>
  );
}

Best Practices

✅Recommended: Don't reload the entire page after language change

i18nexus automatically updates all components. No need to manually reload the page.

✅Recommended: Visual feedback for better user experience

Clearly display the currently selected language so users can easily see the current language.

❌Not recommended: Use in Server Components

useLanguageSwitcher is a client hook. It cannot be used in Server Components.

// ❌ 서버 컴포넌트에서 사용 불가
export default async function Page() {
  const { changeLanguage } = useLanguageSwitcher(); // 에러!
}

// ✅ 클라이언트 컴포넌트에서 사용
"use client";
export default function Page() {
  const { changeLanguage } = useLanguageSwitcher(); // 정상!
}