LanguageToggle

@hua-labs/ui

v1.1.0

여러 언어 간 전환을 위한 토글 컴포넌트입니다. 버튼, 아이콘, 드롭다운 형태를 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { LanguageToggle } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

버튼 형태 (클릭 시 순환)

현재 언어: {lang}: ko

드롭다운 형태

현재 언어: {lang}: en

아이콘 형태

현재 언어: {lang}: ko

네비게이션 컨텍스트

HUA Labs

Props

이름	타입	기본값	설명
`variant`	`"button" \| "icon" \| "dropdown"`	`"button"`	토글 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	토글 크기
`showLabel`	`boolean`	`false`	언어 이름 라벨 표시
`languages`	`Array<{ code: string; name: string; flag?: string }>`	-	사용 가능한 언어 목록
`currentLanguage`	`string`	`"ko"`	현재 선택된 언어 코드
`onLanguageChange`	`(language: string) => void`	-	언어 변경 시 콜백 함수
`className`	`string`	-	추가 CSS 클래스

코드 예시

docs:common.basicUsagetsx

1import { LanguageToggle } from '@hua-labs/ui';
2import { useState } from 'react';
3 
4const [lang, setLang] = useState("ko");
5 
6// Button style (click to cycle through languages)
7<LanguageToggle
8  currentLanguage={lang}
9  onLanguageChange={setLang}
10/>

docs:components.languageToggle.demo.dropdownFormtsx

1// Dropdown with all languages visible
2<LanguageToggle
3  variant="dropdown"
4  showLabel
5  currentLanguage={lang}
6  onLanguageChange={setLang}
7/>

docs:components.languageToggle.demo.iconFormtsx

1// Icon only with dropdown menu
2<LanguageToggle
3  variant="icon"
4  currentLanguage={lang}
5  onLanguageChange={setLang}
6/>

docs:components.languageToggle.demo.customLanguageListtsx

1<LanguageToggle
2  variant="dropdown"
3  showLabel
4  languages={[
5    { code: "ko", name: "한국어", flag: "🇰🇷" },
6    { code: "en", name: "English", flag: "🇺🇸" },
7  ]}
8  currentLanguage={lang}
9  onLanguageChange={setLang}
10/>

기본 언어 목록

• 🇰🇷 ko - 한국어
• 🇺🇸 en - English
• 🇯🇵 ja - 日本語
• 🇨🇳 zh - 中文

접근성

•포커스 링: 키보드 탐색을 위한 포커스 링 표시
•클릭 영역: 접근성을 위한 최소 40px 터치 영역
•외부 클릭: 외부 클릭 시 드롭다운 닫힘

ThemeToggle ScrollToTop