Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyogman/react-translations-provider
React render props component for setting translations
https://github.com/hyogman/react-translations-provider
frontend props react render translation
Last synced: 3 months ago
JSON representation
React render props component for setting translations
- Host: GitHub
- URL: https://github.com/hyogman/react-translations-provider
- Owner: hyogman
- License: mit
- Created: 2018-02-19T20:38:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-03-14T16:39:26.000Z (over 6 years ago)
- Last Synced: 2024-05-11T21:36:59.035Z (6 months ago)
- Topics: frontend, props, react, render, translation
- Language: JavaScript
- Size: 271 KB
- Stars: 34
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-list - react-translations-provider
- awesome-react-context - **react-translations-provider** - Setup and access a global set of translations and current locale via a context provider. (Libraries)
README
# React Translations Provider
A React render prop component for setting translations
`yarn add react-translations-provider`
## Example
```js
import React from "react";
import TranslationProvider, {
Translate,
Text,
} from "react-translations-provider";
import moment from "moment";
require("moment/locale/de");
require("moment/locale/es");
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,
};
function App() {
// At root level of app set the language with the TranslationProvider
return (
{({ setLanguage, language }) => (
setLanguage(e.target.value)}>
English
German
Spanish
)}
);
}
function DisplayStuff() {
// For the rest of app simply wrap with the Translate component to get translations
return (
{({ translations }) => (
{translations.hello}
{translations.working}
{moment()
.locale(translations.locale)
.format("L")}
)}
);
}
function SimpleWeather() {
// Or use the Text component api and pass the key path in translateKey prop to return
// translation from translations object
return (
);
}
export default App;
```
