React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。

React 使用

@18ways/react 為您提供運行時原語。主要工作是將它們清晰地範圍化。

根模式與範圍模式

在根本上，Ways 擁有 API 金鑰、地區、接受的地區以及共享翻譯存儲。

嵌套的 Ways 範疇只需要上下文：

tsx

<Ways
  apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
  locale="es-ES"
  baseLocale="en-GB"
  context="checkout"
>
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

載入中

如果您想在用戶界面中反映翻譯工作，請使用 useTranslationLoading()。

tsx

import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading =
    useTranslationLoading();
 
  return (
    <span>
      {isTranslationLoading
        ? 'Loading translations...'
        : 'Ready'}
    </span>
  );
}

區域化鉤子

根執行時提供了兩個低階掛鉤：

tsx

import {
  useCurrentLocale,
  useSetCurrentLocale,
} from '@18ways/react';

當您想要建立自己的地區控制項而不是 LanguageSwitcher 時，請使用它們。

`語言切換器`

內建的切換器是可控且可組合的。

tsx

<LanguageSwitcher
  currentLocale={locale}
  onLocaleChange={setLocale}
  direction="down"
/>

它從根運行時讀取接受的區域設置列表，並在下一個區域設置解析時處理加載狀態。

組件組合

保持句子完整，並讓 <T> 保持 UI 形狀。

tsx

<T>
  <a href="/pricing">Click here</a> to see more
</T>

訊息格式化逃生通道

預設格式化器是 waysParser。只有在您有具體理由的情況下才應該切換。

messageFormatter="none" 會讓字串保持不變。
自訂格式化函數讓你完全掌控插值。

這應該是罕見的。