React Translations Provider
A React render prop component for setting translations
yarn add react-translations-provider
Example
;;; ;; const en = locale: "en" hello: "Hello World!" working: "Is this working?" weather: weather: "Weather" sunny: "sunny" cloudy: "cloudy" ; const de = locale: "de" hello: "Hallo Welt!" working: "Funktioniert das?" weather: weather: "Wetter" sunny: "sonnig" cloudy: "bewölkt" ; const es = locale: "es" hello: "¡Hola Mundo!" working: "¿Esto funciona?" weather: weather: "Clima" sunny: "soleado" cloudy: "nublado" ; const translations = en de es; { // At root level of app set the language with the TranslationProvider return <TranslationProvider translations=translations default="en"> <div> <select value=language onChange= > <option value="en">English</option> <option value="de">German</option> <option value="es">Spanish</option> </select> <DisplayStuff /> <SimpleWeather /> </div> </TranslationProvider> ;} { // For the rest of app simply wrap with the Translate component to get translations return <Translate> <div> <h1>translationshello</h1> <h2>translationsworking</h2> <h3> </h3> </div> </Translate> ;} { // Or use the Text component api and pass the key path in translateKey prop to return // translation from translations object return <div> <h1> <Text translateKey="weather.weather" /> </h1> <h3> <Text translateKey="weather.sunny" /> </h3> </div> ;} ;