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 into the desired language.

Alternatively, you can use the useSwitchLanguage() 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>
    )
}

Please note that when using the useLanguageSwitcher() hook, the language prop of the MagicTranslateProvider is treated as the default (initial) language. Changing the language by setting the language prop will no longer have any effect.

Example project

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