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)).

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.