useLanguageChange

훅

@hua-labs/i18n-core

언어 전환 기능을 제공하는 훅입니다. 지원되는 언어 목록과 언어 변경 함수를 반환합니다.

설치

Terminalbash

npm install @hua-labs/i18n-core

Importtsx

import { useLanguageChange } from '@hua-labs/i18n-core';

기본 사용법

tsx

import { useLanguageChange } from '@hua-labs/i18n-core';

function LanguageSwitcher() {
  const { changeLanguage, supportedLanguages, currentLanguage } = useLanguageChange();

  return (
    <div className="flex gap-2">
      {supportedLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
          className={currentLanguage === lang.code ? 'font-bold' : ''}
        >
          {lang.nativeName}
        </button>
      ))}
    </div>
  );
}

라이브 데모

supportedLanguages

ko·Korean

한국어

en·English

English

changeLanguage()

currentLanguage:

ko

API 레퍼런스

반환값

이름	타입	설명
changeLanguage	(lang: string) => void	docs:i18n.use-language-change.returns.changeLanguage
supportedLanguages	Array<{ code: string; name: string; nativeName: string }>	docs:i18n.use-language-change.returns.supportedLanguages
currentLanguage	string	docs:i18n.use-language-change.returns.currentLanguage

코드 예시

docs:i18n.use-language-change.examples.i18nexamplesdropdownswitcher

tsx

import { useLanguageChange } from '@hua-labs/i18n-core';
import { Select } from '@hua-labs/ui/form';

function LanguageDropdown() {
  const { changeLanguage, supportedLanguages, currentLanguage } = useLanguageChange();

  return (
    <Select
      value={currentLanguage}
      onChange={(value) => changeLanguage(value)}
      options={supportedLanguages.map((lang) => ({
        value: lang.code,
        label: lang.nativeName,
      }))}
    />
  );
}

사용 사례

언어 전환기

사용자가 언어를 선택할 수 있는 UI 구현

사용자 설정

사용자 언어 설정 저장 및 복원

지역 기반 언어

사용자 위치에 따른 자동 언어 설정

useTranslation useDateFormatter