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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.magictranslate.io/magic-translate/clients/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.