# React

### Getting Started

Install the react client for *Magic Translate* in your application.

```bash
# 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>`

```tsx
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](https://magictranslate.io) to get one.

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

```tsx
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:

```jsx
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>
    )
}
```

{% hint style="info" %}
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.
{% endhint %}

### Example project

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