├── .babelrc ├── .gitignore ├── .nvmrc ├── .travis.yml ├── HISTORY.md ├── LICENSE ├── README.md ├── examples ├── hooks.js └── legacy.js ├── package.json ├── scripts └── jest │ └── setup.js ├── src ├── ReactTranslate.js ├── __tests__ │ ├── getPluralType-test.js │ ├── render-test.js │ └── translate-test.js ├── createTranslator.js ├── getPluralType.js ├── pluralMap.js ├── pluralTypes.js └── render.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store? 2 | .DS_Store 3 | node_modules/ 4 | lib/ 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 5.2.0 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10.14.2 4 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | ## 7.0.0 2 | 3 | Features: 4 | 5 | - New hooks API (`useTranslate`) 6 | 7 | Changes: 8 | 9 | - Requires a React version >= 16.8.0 10 | - Removed `shouldComponentUpdate` param in `translate`, to be replaced with `useMemo` 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Matthias Le Brun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-translate 2 | 3 | > Internationalization for react 4 | 5 | ## Getting started 6 | 7 | ```console 8 | $ npm install --save react-translate 9 | # or 10 | $ yarn add react-translate 11 | ``` 12 | 13 | ## Usage 14 | 15 | ### With hooks 16 | 17 | ```javascript 18 | import { TranslatorProvider, useTranslate } from "react-translate" 19 | 20 | let translations = { 21 | locale: "en", 22 | Home: { 23 | "HELLO": "Helloworld!" 24 | } 25 | }; 26 | 27 | function Home() { 28 | let t = useTranslate("Home"); 29 | return

{t("HELLO")}

30 | } 31 | 32 | function App() { 33 | return ( 34 | 35 | 36 | 37 | ) 38 | } 39 | ``` 40 | 41 | ### With legacy API 42 | 43 | 44 | ```javascript 45 | import { TranslatorProvider, translate } from "react-translate" 46 | 47 | let translations = { 48 | locale: "en", 49 | Home: { 50 | "HELLO": "Helloworld!" 51 | } 52 | }; 53 | 54 | let Home = function({t}) { 55 | return

{t("HELLO")}

56 | } 57 | 58 | Home = translate("Home")(Home); 59 | 60 | function App() { 61 | return ( 62 | 63 | 64 | 65 | ) 66 | } 67 | ``` 68 | 69 | ## API 70 | 71 | ### `` 72 | 73 | Provides the translation data for descendant components. 74 | 75 | ```javascript 76 | import { render } from "react-dom"; 77 | import { TranslatorProvider } from "react-translate"; 78 | 79 | // … 80 | 81 | render( 82 | 83 | 84 | , 85 | mountNode 86 | ); 87 | ``` 88 | 89 | ### useTranslate(namespace) 90 | 91 | Returns a `t` function that returns translations under `namespace`. 92 | 93 | ### translate(namespace) 94 | 95 | Wraps a component and passes a `t` function as a prop. 96 | 97 | #### Arguments 98 | 99 | - `namespace` (_String_) 100 | 101 | #### Usage 102 | 103 | ```javascript 104 | const Header = ({ t }) =>
{t("TITLE")}
; 105 | 106 | export default translate("Header")(Header); 107 | ``` 108 | 109 | ### t(key [, params]) 110 | 111 | The `t` function is the one that returns your translations given the key, and optionally some parameters. 112 | 113 | ```javascript 114 | // for a simple key 115 | t("KEY"); // "value" 116 | // for a key with a parameter 117 | t("KEY", { foo: "bar" }); // replaces "{{foo}}" in the translation with "bar" 118 | // for a key with a numeral parameter, which makes `t` choose between singular 119 | // and plural 120 | t("KEY", { n: 2 }); 121 | ``` 122 | 123 | ## Organizing the `translations` object 124 | 125 | Translations should be grouped by component: 126 | 127 | ```js 128 | const translations = { 129 | // the `locale` parameter is mandatory, it enables react-translate to use 130 | // the right rules for singular and plural 131 | locale: "fr", 132 | ComponentName: { 133 | SIMPLE_KEY: "Helloworld", 134 | KEY_WITH_PARAMS: "Hello {{name}}", 135 | KEY_WITH_PLURAL: ["You have {{n}} message", "You have {{n}} messages"] 136 | } 137 | }; 138 | ``` 139 | 140 | ## How do I load translations ? 141 | 142 | ReactTranslate does not give you a specific way to load translations, its goal is only to provide a way to pass translations down to your app components'. 143 | 144 | You can use a simple XHR call, put translations in a `