React

How to use Magic Translate in React applications

Getting Started

Install the react client for Magic Translate in your application.

# using yarn
yarn add @magic-translate/react

# using npm
npm i @magic-translate/react

Now it's time to wrap your application in a <MagicTranslateProvider>

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

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

If you don't have an API key yet, please visit magictranslate.io to get one.

Now you can use the translate component <T> anywhere in your application

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

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

And that's basically it! You can now translate your application effortlessly into over 70 languages 🤯

Changing Languages

To change the current language, all you have to do is change the language prop of the MagicTranslateProvider. All your content will automatically be translated to the desired language.

Example project

You can find an example project here: https://github.com/magic-translate/magic-translate-example-react