# Setup

* In your index file, import your JSON translations
* Wrap your App with **Talkr**'s `Provider`
* Pass it your available `languages` and your `defaultLanguage`.
* You also have the option to let **Talkr** detect browser's language with the prop `detectBrowserLanguage` (see \[props]\(#Available props)).

```tsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import { Talkr } from "talkr";
import App from "./app";
import en from "./i18n/en.json";
import fr from "./i18n/fr.json";

const root = createRoot(document.getElementById("root"));

root.render(
  <Talkr languages={{ en, fr }} defaultLanguage="en">
    <App />
  </Talkr>,
);
```

You can pass these props to **Talkr**'s provider

|                       | Type      | Role                                                                                                                                                                                                                                                                                                                |
| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| languages             | `object`  | object containing all your json files. Typical format: `{en: {...}, fr: {...}}`                                                                                                                                                                                                                                     |
| defaultLanguage       | `string`  | default language of your app (a similar key must be included in the `language` prop)                                                                                                                                                                                                                                |
| detectBrowserLanguage | `boolean` | if `true`, **Talkr** will automatically use browser language and override the `defaultLanguage`. If the browser language is not included in your available translations, it will switch back to `defaultLanguage`. Not available in React Native. Use `expo-localization` to fetch the default user locale instead. |

> 🤓: The auto-detect language feature will always return a simple key such as 'fr' instead of 'fr\_FR'. Keep things simple and always declare your languages with 2 letters.
