React

리액트 앱에서 Magic Translate 쓰는 법.

설치

앱에 Magic Translate 용 리액트 클라이언트를 설치해.

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

그런 다음 앱을 <MagicTranslateProvider> 로 포장해.

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

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

API 키가 아직 없으면 Magic Translate 가입해서 얻어.

이제 앱 어디서나 <T> 구성 요소를 사용할 수 있어.

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

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

그게 다야.이제 네 앱을 70개 이상의 언어로 번역할 수 있어.

언어 바꾸기

현재 언어를 변경하려면 MagicTranslateProvider 중 language prop 바꿔라.너의 모든 콘텐츠가 자동으로 새 언어로 번역돼.

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

useLanguageSwitcher() hook 사용할 때 MagicTranslateProvider language prop 는 초기 언어만 설정해.나중에 prop 변경해도 아무 소용이 없어.

예제 프로젝트

GitHub에서 예제 프로젝트를 찾을 수 있어.