React

Cara menggunakan Magic Translate di aplikasi React.

Instalasi

Instal klien React untuk Magic Translate di aplikasi Anda.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Kemudian bungkus aplikasi Anda dalam <MagicTranslateProvider>.

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

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

Jika Anda belum memiliki kunci API, daftar Magic Translate untuk mendap atkannya.

Sekarang Anda dapat menggunakan komponen <T> di mana saja di aplikasi Anda.

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

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

Itu saja. Aplikasi Anda sekarang dapat diterjemahkan ke lebih dari 70 bahasa.

Mengubah bahasa

Untuk mengubah bahasa saat ini, ubah language prop dari MagicTranslateProvider. Semua konten Anda diterjemahkan ke dalam bahasa baru secara otomatis.

Atau, Anda dapat menggunakan 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>
    </>
  );
};

Saat Anda menggunakan useLanguageSwitcher() hook, language prop dari MagicTranslateProvider hanya menetapkan bahasa awal. Mengubah prop setelahnya tidak berpengaruh.

Contoh proyek

Anda dapat menemukan contoh proyek di GitHub.