VoerkaI18n

https://zhangfisher.github.io/voerka-i18n/
Admin
VoerkaI18n is a comprehensive internationalization solution that simplifies project localization...
Tokens:6,837
Snippets:42
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install VoerkaI18n CLI

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Installs the VoerkaI18n command-line interface globally for managing internationalization. This is the first step in setting up VoerkaI18n.

```bash
npm install -g @voerkai18n/cli
```

```bash
yarn global add @voerkai18n/cli
```

```bash
pnpm  add -g @voerkai18n/cli
```

--------------------------------

### Install VoerkaI18n CLI Globally

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Installs the VoerkaI18n command-line interface globally using npm, yarn, or pnpm. This is the first step to initialize and manage internationalization in your project.

```bash
npm install -g @voerkai18n/cli

```

```bash
yarn global add @voerkai18n/cli

```

```bash
pnpm  add -g @voerkai18n/cli

```

--------------------------------

### Apply Svelte Support with VoerkaI18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Applies Svelte support to your VoerkaI18n project. This command installs the `@voerkai18n/svelte` package and updates relevant language files. Alternatively, manual installation and configuration are possible.

```bash
> voerkai18n apply

```

--------------------------------

### Lit: Full Example with VoerkaI18n HOC and Hooks API

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/lit

This comprehensive example demonstrates both the HOC and Hooks API methods for integrating VoerkaI18n within Lit components. It includes features like language switching, basic translations, parameterized translations, and component-based translations, showcasing the flexibility and power of the library.

```typescript
import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { withI18n, useI18n } from '@voerkai18n/lit'
import { i18nScope } from './languages'

// 使用高阶组件方式
@customElement('i18n-demo')
class I18nDemo extends withI18n(LitElement, i18nScope) {
  render() {
    return html`
      <div class="language-switcher">
        <h2>${this.t('语言切换')}</h2>
        ${this.languages.map(
          (lang) => html`
            <button
              @click=${() => this.setLanguage(lang.name)}
              ?disabled=${this.lang === lang.name}
            >
              ${lang.label}
            </button>
          `
        )}
      </div>
      
      <div class="current-language">
        ${this.t('当前语言')}: ${this.lang}
      </div>
      
      <div class="translation-demo">
        <h3>${this.t('基本翻译')}</h3>
        <p>${this.t('这是一个使用 Lit 和 voerka-i18n 的示例')}</p>
        <p>${this.t('你可以切换语言来查看翻译效果')}</p>
      </div>
      
      <div class="translation-demo">
        <h3>${this.t('带参数的翻译')}</h3>
        <p>${this.t('你好，{name}', { name: 'Lit' })}</p>
      </div>
      
      <lit-translate
        message="这是使用组件的翻译示例"
      ></lit-translate>
    `
  }
}

// 使用 hooks 方式
@customElement('i18n-hooks-demo')
class I18nHooksDemo extends LitElement {
  private i18n = useI18n(this)
  render() {
    return html`
      <h3>${this.i18n.t('使用 Hooks API')}</h3>
      <p>${this.i18n.t('当前语言')}: ${this.i18n.activeLanguage}</p>
      <p>${this.i18n.t('这是使用 hooks API 的示例')}</p>
    `
  }
}

```

--------------------------------

### Date Formatter Usage Examples in voerkai18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Provides comprehensive examples of the `date` formatter in `voerkai18n` with various format options including 'local', 'long', 'short', 'iso', 'gmt', 'utc', and custom templates. Demonstrates output for both 'zh-CN' and 'en-US' locales.

```javascript
t("{ value | date }",new Date())
t("{ value | date }","2022/12/9 09:12:36") 
t("{ value | date }",1661084229790)
t("{ value | date('long') }",new Date())
t("{ value | date('short') }","2022/12/9 09:12:36") 
t("{ value | date('local') }",1661084229790)
t("{ value | date('iso') }",1661084229790)
t("{ value | date('gmt') }",1661084229790)
t("{ value | date('utc') }",1661084229790)
t("{ value | date('YYYY年MM月DD日 HH点mm分ss秒') }",1661084229790)
t("{ value | date('YYYY-MM-DD') }",1661084229790)
```

--------------------------------

### Apply React Support with VoerkaI18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Applies React support to the VoerkaI18n project by installing the '@voerkai18n/react' package and updating language-related files, specifically 'languages/component.{tsx|jsx}'.

```bash
> voerkai18n apply
```

--------------------------------

### Configure Relative Time Formatting in JSON

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Provides an example of how to configure the `relativeTime` formatter in a JSON file. This includes defining units, a 'now' string, and templates for 'before' and 'after' time descriptions.

```json
{
    "<语言代码>":{
        "weekday":{
            "units"       : ["seconds","minutes","hours","days","weeks","months","years"],
            "now"         : "Now",
            "before"      : "{value} {unit} ago",
            "after"       : "after {value} {unit}"
        }
    }
}
```

--------------------------------

### Using Currency Formatter with Custom Bitcoin Format (JavaScript)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/currency

Demonstrates how to use the translation function 't' with the currency formatter to display values in Bitcoin. The first example uses a predefined 'bitcoin' format, while the second shows how to specify format options like 'symbol' directly within the formatter call.

```javascript
t("我有{value | currency('bitcoin') }个比特币",12344354)
t("我有{value | currency({format:'bitcoin',symbol:'฿') }个比特币",12344354)
```

--------------------------------

### Manual Configuration of React Translate Component

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Provides instructions for manually configuring the React translate component by creating 'languages/component.{tsx|jsx}' and using 'createTranslateComponent' from '@voerkai18n/react'. This allows for custom setups without running the 'voerkai18n apply' command.

```typescript
import { createTranslateComponent,ReactTranslateComponentType } from "@voerkai18n/react";
export const component = createTranslateComponent()
export type TranslateComponentType = ReactTranslateComponentType
```

--------------------------------

### Format Weekday using `weekday` formatter in JavaScript

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Demonstrates how to use the `weekday` formatter in JavaScript to output the day of the week in different formats (long, short, number). It shows examples with current date and a specific date string.

```javascript
t("{ value | weekday }",new Date())
t( "{ value | weekday('long') }",new Date())
t( "{ value | weekday('short') }","2022/12/9 09:12:36")
t( "{ value | weekday('number') }","2022/12/9 09:12:36")
```

--------------------------------

### Display Relative Time using `relativeTime` formatter in JavaScript

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Illustrates the usage of the `relativeTime` formatter in JavaScript to display time differences relative to a given date. It shows examples for both the current date and a specified base date.

```javascript
t("{ value | relativeTime }","2022/12/9 09:12:36")
// 指定基准时间
t( "{ value | relativeTime('2022/12/2 09:12:36') }","2022/12/9 09:12:36")
t( "{ value | relativeTime('" + "2022/12/2 09:12:36" + "') }","2022/12/9 09:12:36")
```

--------------------------------

### Custom Currency Formatting Rule for 'ja-JP' (JSON)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/currency

An example of configuring custom currency formatting rules for the 'ja-JP' locale within the 'languages/formatters.json' file. It demonstrates setting specific units, radix, symbol, prefix, suffix, and choosing a default format template.

```json
{
    "ja-JP":{
        "currency" : {
            "units"    : ["","千","百万","十亿","万亿"],
            "radix"    : 4,
            "symbol"   : "¥",
            "prefix"   : "JPY",
            "suffix"   : "円",
            "division" : 3,
            "precision": 2,
            // 指定默认的格式化规则模板名称
            "format"   : "long",  
            // 预定义格式化规则模板
            "default" : "{symbol}{value}{unit}",
            "long"    : "{prefix} {symbol}{value}{unit}{suffix}",
            "short"   : "{symbol}{value}{unit}",
            "custom"  : "{prefix} {symbol}{value}{unit}{suffix}",
            "bitcoin" : "BTC {symbol}{value}{unit}{suffix}"
        }
    },
    // ... 其他语言的货币格式化规则
}
```

--------------------------------

### Initialize VoerkaI18n Project

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Initializes a new VoerkaI18n project, creating a language working directory (defaulting to src/languages) with a predefined structure for translations, prompts, API configurations, and components.

```bash
> voerkai18n init
```

--------------------------------

### Initialize VoerkaI18n Project

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Initializes a new VoerkaI18n project. This command creates a language working directory, typically at `src/languages`, with a predefined structure for managing translation files, prompts, APIs, and configuration.

```bash
> voerkai18n init

```

--------------------------------

### VoerkaI18n 语言配置文件示例

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/intro/question

展示了VoerkaI18n的语言配置文件结构，包括作用域设置、语言列表配置，并提供了正确和错误两种加载语言包的方式。错误示例展示了异步加载默认语言包导致的问题，正确示例则展示了静态加载方式。

```ts
// 语言配置文件

const scopeSettings = {
    "languages": [
        {
            "name": "zh",
            "title": "Chinese"
        },
        {
            "name": "en",
            "title": "English",
            "default":true 
        } 
    ] 
}

// 错误示例

import defaultMessages from "./zh.js"  
const messages = {
    'zh' : defaultMessages,
    // 由于默认语言是en,采用了异步加载的，所以会报错
	'en' :  ()=>import("./en.js") 
}

// 正确示例
import defaultMessages from "./en.js"  
const messages = {
    'zh' : ()=>import("./en.js"),
	'en' : defaultMessages   // 正确：静态加载
}
```

--------------------------------

### Basic Date Formatting with voerkai18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Demonstrates the basic usage of the `date` formatter in `voerkai18n` for localizing dates provided as Date objects, date strings, or timestamps. It shows the default output format.

```javascript
t("{ value | date }",new Date()) 
// Date类型
t("{ value | date }","2022/12/9 09:12:36") 
// 标准的日期时间字符串
t("{ value | date }",1661084229790) 
// 时间戳
```

--------------------------------

### Configure Main Application Entry Point for VoerkaI18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Configures the main application entry point (e.g., main.ts) to integrate VoerkaI18n by importing './languages' and using 'i18nScope.ready' to render the React application once internationalization is prepared.

```typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx' 
import "./languages"   
import { i18nScope } from "./languages"

i18nScope.ready(()=>{
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
})
```

--------------------------------

### VSCode 正则替换提取中文

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/intro/question

提供了一个VSCode中用于在代码中查找并替换中文文本的正则表达式，用于将 `'xxx'` 或 `"xxx"` 形式的中文替换为 `t("xxx")`，以辅助旧项目迁移到VoerkaI18n。

```regex
(['"]([^'"\n\]|\[\s\S])*[一-鿿]([^'"\n\]|\[\s\S])*['"])
```

--------------------------------

### Configure Namespaces in voerkai18n (JSON)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/namespace

This JSON configuration defines namespaces for the voerkai18n tool. It maps directory names (e.g., 'routes', 'core/auth') to corresponding namespace keys. This allows the tool to extract translations into separate files based on these namespaces, improving manageability for large projects.

```json
{
    "namespaces":{
        "routes":"routes",
        "auth":"core/auth",
        "admin":"views/admin"
    }
}
```

--------------------------------

### Configure Svelte Application Entry Point

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Configures the main entry point (`main.ts`) of a Svelte application to use VoerkaI18n. It imports the necessary i18n scope and renders the application once the i18n scope is ready.

```typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx' 
import "./languages"   
import { i18nScope } from "./languages"

i18nScope.ready(()=>{
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  )
})

```

--------------------------------

### Predefined Date Formats in voerkai18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Illustrates how to use predefined format names (e.g., 'long', 'short') with the `date` formatter in `voerkai18n`. This allows for consistent, locale-specific date representations without manual template creation.

```javascript
t("{ value | date('<格式名称>') }",new Date())
t("{ value | date('<格式名称>') }","2022/12/9 09:12:36")
t("{ value | date('<格式名称>') }",1661084229790)
```

--------------------------------

### JSON 翻译结果示例

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/intro/question

展示了VoerkaI18n提取翻译内容的JSON格式，其中包含翻译文本、目标语言内容以及提取来源的文件名。 `$files` 字段指示了翻译内容是从哪个文件提取的。

```json
{
    " - 更新格式化器:{}": {
        "en": " - Update formatters:{}",
        "$files": [
            "compile.command.js"  // 代表是从该文件中提取的
        ]
    }
}
```

--------------------------------

### Modify Language Pack Loader Function

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/intro/get-started

This Javascript code snippet demonstrates how to modify the language pack loader function in `languages/loader.js` or `languages/loader.ts`. It shows how to asynchronously fetch and parse a JSON language file from a specified server path. This is a key step for enabling dynamic language loading.

```javascript
module.exports = async (language,scope)=>{
    return await (await fetch(`/languages/${scope.id}/${language}.json`)).json()
}
```

--------------------------------

### Configure Vite for VoerkaI18n Plugin

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Configures the Vite build tool by adding the '@voerkai18n/plugins/vite' plugin to handle automatic text mapping. The plugin should be placed before the React plugin to ensure proper parsing of translation keys.

```typescript
import { defineConfig } from 'vite'
import i18nPlugin from '@voerkai18n/plugins/vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
import viteInspector from 'vite-plugin-inspect'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    i18nPlugin(),             
    react(),    
    tailwindcss(),
    viteInspector(),    
  ],
})
```

--------------------------------

### Configure Loading State for Svelte Translate Component

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Demonstrates how to configure a loading state for the Svelte translate component when using dynamic or asynchronous translations. This involves providing a loading component to `createTranslateComponent`.

```typescript
// languages/component.tsx
import { createTranslateComponent,ReactTranslateComponentType } from "@voerkai18n/react";
import Loading from '../components/Loading';
export const component = createTranslateComponent({loading:<Loading/>})
export type TranslateComponentType = ReactTranslateComponentType

```

--------------------------------

### Define Custom Date Format 'full' in JSON for `date` formatter

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Demonstrates how to add a custom date format rule named 'full' for the `date` formatter within a JSON configuration file. This allows for more detailed date and time representations.

```json
{
    "zh-CN": {
        "date":{
            "full": "北京时间：YYYY年MM月DD日 HH点mm分ss秒 a"
        }
    }
}
```

--------------------------------

### Configuring Date Formatters in voerkai18n JSON

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Demonstrates how to configure custom date formatting rules for different languages within the `languages/formatters.json` file for `voerkai18n`. This allows for locale-specific overrides and definitions.

```json
{
    "ja-JP":{
        "date":{
            "format":"<local | iso | gmt | utc | long | short | [模板字符串]>",
            "short":"<模板字符串>",
            "format":"<local | iso | gmt | utc | long | short | [模板字符串]>"
        }
    }
    // ...其他语言
}
```

--------------------------------

### Configure Weekday Formatting in JSON

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Shows how to configure custom weekday formatting rules for different languages in a JSON file. This includes defining 'long', 'short', and 'number' formats, as well as a general 'format' string for language-specific display.

```json
{
    "<语言代码>":{
        "weekday":{
            "long":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
            "short":["周日","周一","周二","周三","周四","周五","周六"],
            "format":"< 0:long | 1:short | 2:number>"
        }
    }
}
```

--------------------------------

### Configure Vite Plugin for VoerkaI18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Configures the Vite build tool to use the `@voerkai18n/plugins/vite` plugin. This plugin provides automatic text mapping for Svelte applications. It should be placed before the `sveltekit` plugin to ensure correct parsing of translation functions and components.

```typescript
import tailwindcss from "@tailwindcss/vite";
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite'; 
import i18nPlugin from '@voerkai18n/plugins/vite'

export default defineConfig({
	plugins: [
		i18nPlugin(),
		sveltekit(),
		tailwindcss()]
});

```

--------------------------------

### Lit: Integrate VoerkaI18n using Higher-Order Component (HOC)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/lit

This method uses a Higher-Order Component (HOC) to wrap a LitElement class, providing translation capabilities. The `withI18n` function injects the translation `t` function into the component. This approach is suitable for straightforward integration where component state management is managed by Lit.

```typescript
import { withI18n } from '@voerkai18n/lit';

class MyComponent extends withI18n(LitElement) {
  render() {
    return html`<div>${this.t('Hello World')}</div>`;
  }
}
```

--------------------------------

### Custom Date Formatting Templates in voerkai18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/datetime

Shows how to define custom date formats using template strings with the `date` formatter in `voerkai18n`. This provides maximum flexibility for specific display requirements, using placeholders like YYYY, MM, DD.

```javascript
t("{ value | date('<模板字符串>') }",new Date())
t("{ value | date('<模板字符串>') }","2022/12/9 09:12:36")
t("{ value | date('<模板字符串>') }",1661084229790)
```

--------------------------------

### Use Translation Functions and Components in React

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Demonstrates how to use the 't' function for simple string translations and the 'Translate' component for inline text or larger content blocks within React components, leveraging VoerkaI18n.

```tsx
import { t, Translate } from './languages'

export default ()=>{
  return (
    <div>
      <h1>
        <Translate message="请输入用户名称"/>
      </h1>
      <div>
          <span>
            <Translate message="用户名:" />
          </span>
          <input type="text" placeholder={t('邮件/手机号码/帐号')}/>
          <span>
            <Translate message="密码:" />
          </span>
          <input type="password" placeholder={t('至少6位的密码')}/>            
          <Translate id="notice">
            大段文本内容
          </Translate>
      </div>            
      <button onClick={login}>
        <Translate message="登录" />
      </button>
    </div>
  )
}
```

--------------------------------

### Built-in Currency Formatting Rules (JSON)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/currency

Defines the default currency formatting rules for 'en-US' and 'zh-CN' locales. This includes units, radix, symbol, prefix, suffix, division, and precision. It also specifies default formatting templates like 'default', 'long', 'short', and 'custom'.

```json
{
    "en-US":{
        //千,百万,十亿,万亿
        units    : [""," thousands"," millions"," billions"," trillions"],
        // 进制，即三位一进，中文是4位一进
        radix    : 3,                       
        symbol   : "$",                     // 符号
        prefix   : "USD",                   // 前缀
        suffix   : "",                      // 后缀
        division : 3,                       // ,分割位
        precision: 2,                       // 精度             
    },
    "zh-CN":{
        units    : ["","万","亿","万亿","万万亿"],
        radix    : 4,                       // 进制，即三位一进制，中文是是4位一进
        symbol   : "￥",
        prefix   : "RMB",
        suffix   : "元",
        division : 4,
        precision: 2            
    }    
},{
    default  : "{symbol}{value}{unit}",
    long     : "{prefix} {symbol}{value}{unit}{suffix}", 
    short    : "{symbol}{value}{unit}",
    custom   : "{prefix} {symbol}{value}{unit}{suffix}",
    format   : "default",  
}
```

--------------------------------

### Manually Configure Svelte Translate Component

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Provides the manual configuration for the Svelte translate component (`languages/component.tsx`). It shows how to import and create the translate component using `@voerkai18n/svelte`.

```typescript
import { createTranslateComponent,type SvelteTranslateComponent } from "@voerkai18n/svelte";
export const component  = createTranslateComponent()
export type TranslateComponentType = SvelteTranslateComponent

```

--------------------------------

### Lit: Integrate VoerkaI18n using Hooks API

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/lit

The Hooks API provides an alternative way to integrate VoerkaI18n into Lit components. The `useI18n` function returns an i18n instance that can be used within the component's lifecycle. This method is more aligned with modern JavaScript patterns and can be beneficial for components with complex state management.

```typescript
import { useI18n } from '@voerkai18n/lit';

class MyComponent extends LitElement {
  i18n = useI18n(this);
  
  render() {
    return html`<div>${this.i18n.t('Hello World')}</div>`;
  }
}
```

--------------------------------

### Translate Content in Svelte Components

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Demonstrates how to use the `t` function and `Translate` component provided by VoerkaI18n for internationalizing content within Svelte components. This includes translating input placeholders and entire blocks of text.

```tsx
import { t, Translate } from './languages'

export default ()=>{
  return (
    <div>
      <h1>
        <Translate message="请输入用户名称"/>
      </h1>
      <div>
          <span>
            <Translate message="用户名:" />
          </span>
          <input type="text" placeholder={t('邮件/手机号码/帐号')}/>
          <span>
            <Translate message="密码:" />
          </span>
          <input type="password" placeholder={t('至少6位的密码')}/>            
          <Translate id="notice">
            大段文本内容
          </Translate>
      </div>            
      <button onClick={login}>
        <Translate message="登录" />
      </button>
    </div>
  )
}

```

--------------------------------

### Implement Language Switching in React with useVoerkaI18n

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Shows how to use the 'useVoerkaI18n' hook in a React component to access current language information and provide functionality to change the active language, re-rendering components as needed.

```tsx
import React from 'react'; 
import { useVoerkaI18n } from '@voerkai18n/react';
import classNames from 'classnames'

const LanguageBar: React.FC = () => {
  const { activeLanguage, changeLanguage, languages } = useVoerkaI18n();
  return (
    <div className="flex md:order-2 flex-row justify-items-center align-middle">
      { languages.map((lang) => {
        return (<button 
          key={lang.name} 
          onClick={() => changeLanguage(lang.name) }
          className={ lang.name === activeLanguage ? 'active' : ''}
        >{lang.name}</button>)
      })}
    </div>
  )
}
```

--------------------------------

### Implement Language Switching in Svelte

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Shows how to implement language switching functionality in a Svelte component using the `useVoerkaI18n` hook. It renders buttons for each available language, allowing users to change the active language and updates the UI accordingly.

```tsx
import React from 'react'; 
import { useVoerkaI18n } from '@voerkai18n/svelte';
import classNames from 'classnames'

const LanguageBar: React.FC = () => {
  const { activeLanguage, changeLanguage, languages } = useVoerkaI18n();
  return (
    <div className="flex md:order-2 flex-row justify-items-center align-middle">
      { languages.map((lang) => {
        return (<button 
          key={lang.name} 
          onClick={() => changeLanguage(lang.name) }
          className={ lang.name === activeLanguage ? 'active' : ''}
        >{lang.name}</button>)
      })}
    </div>
  )
}

```

--------------------------------

### Override Default Currency Formatting Rule for 'zh-CN' (JSON)

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/use/currency

Shows how to override specific default currency formatting parameters for a locale, in this case, changing the 'radix' for 'zh-CN' from 4 to 3. This allows fine-tuning of existing rules.

```json
{
    "zh-CN":{
        "currency" : {
            "radix"    : 3                       
        }
    }
}
```

--------------------------------

### VoerkaI18n Hook Return Value Structure

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Details the structure of the object returned by the 'useVoerkaI18n' hook, including properties for managing the internationalization scope, active language, default language, available languages, and translation functions.

```typescript
{
    scope          : VoerkaI18nScope
    manager        : VoerkaI18nManager
    activeLanguage : string
    defaultLanguage: string
    languages      : VoerkaI18nLanguage
    changeLanguage : (language:string)=>Promise<string>,
    t              : VoerkaI18nTranslate
};
```

--------------------------------

### Manual Configuration of Vue 2 Translate Component

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/react

Details the manual configuration for a Vue 2 translate component, involving updating 'languages/component.ts' to export a Vue 2 component created using 'createTranslateComponent' from '@voerkai18n/vue2'. This ensures automatic re-rendering during language changes.

```typescript
import { 
  createTranslateComponent, 
  type VueTranslateComponentType 
} from "@voerkai18n/vue2";
export const component = createTranslateComponent()
export type TranslateComponentType = VueTranslateComponentType
```

--------------------------------

### VoerkaI18n Hook Return Value

Source: https://zhangfisher.github.io/voerka-i18n/zh/guide/integration/svelte

Defines the structure of the object returned by the `useVoerkaI18n` hook in Svelte. It includes scope, manager, active language, default language, available languages, a function to change the language, and a translation function.

```typescript
{
    scope          : VoerkaI18nScope
    manager        : VoerkaI18nManager
    activeLanguage : string
    defaultLanguage: string
    languages      : VoerkaI18nLanguage
    changeLanguage : (language:string)=>Promise<string>,
    t              : VoerkaI18nTranslate
};

```
Tokens:
Raw