React

React uygulamalarında Magic Translate nasıl kullanılır.

Kurulum

Uygulamanıza Magic Translate için React istemcisini yükleyin.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

Ardından uygulamanızı bir <MagicTranslateProvider> olarak sarın.

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

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

Henüz bir API anahtarınız yoksa, bir tane almak için Magic Translate 'a kaydolun.

Artık <T> bileşenini uygulamanızın herhangi bir yerinde kullanabilirsiniz.

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

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

İşte bu kadar. Uygulamanız artık 70'den fazla dile çevrilebilir.

Dilleri değiştirme

Geçerli dili değiştirmek için MagicTranslateProvider öğesinin language prop değerini değiştirin. Tüm içeriğiniz otomatik olarak yeni dile çevrilir.

Alternatif olarak, useLanguageSwitcher() hook 'i kullanabilirsiniz.

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>
    </>
  );
};

useLanguageSwitcher() hook değerini kullandığınızda, MagicTranslateProvider öğesinin language prop değeri yalnızca başlangıç dilini ayarlar. Daha sonra prop seçeneğini değiştirmenin hiçbir etkisi yoktur.

Örnek proje

GitHub 'da örnek bir proje bulabilirsiniz.