React

Cách sử dụng Magic Translate trong ứng dụng React

Lắp đặt

Cài đặt ứng dụng khách React cho Magic Translate trong ứng dụng của bạn.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Sau đó gói ứng dụng của bạn trong <MagicTranslateProvider>.

import { MagicTranslateProvider, Language } from '@magic-translate/react';

const MyApp = () => (
  <MagicTranslateProvider
    apiKey="<your-api-key>"
    language={Language.DE} // any supported language
  >
    {/* your app */}
  </MagicTranslateProvider>
);

Nếu bạn chưa có khóa API, hãy đăng ký Magic Translate để nhận khóa.

Bây giờ bạn có thể sử dụng thành phần <T> ở bất cứ đâu trong ứng dụng của mình.

import { T } from '@magic-translate/react';

const SomeComponent = () => <T>Please translate me!</T>;

Đó là nó. Ứng dụng của bạn hiện có thể được dịch sang hơn 70 ngôn ngữ.

Thay đổi ngôn ngữ

Để thay đổi ngôn ngữ hiện tại, hãy thay đổi language prop của MagicTranslateProvider. Tất cả nội dung của bạn được dịch sang ngôn ngữ mới tự động.

Ngoài ra, bạn có thể sử dụng useLanguageSwitcher() hook.

import { useLanguageSwitcher } from '@magic-translate/react';

const SomeComponent = () => {
  const { setLanguage, currentLanguage } = useLanguageSwitcher();

  return (
    <>
      <div>Current language is: {currentLanguage}</div>
      <button onClick={() => setLanguage('de')}>German</button>
    </>
  );
};

Khi bạn sử dụng useLanguageSwitcher() hook, language prop của MagicTranslateProvider chỉ đặt ngôn ngữ ban đầu. Thay đổi prop sau đó không có tác dụng.

Dự án ví dụ

Bạn có thể tìm thấy một dự án ví dụ trên GitHub.