From 2dbecfc1528e6ad18f3c0e0ab5866b260f53a52e Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 13:00:32 +0100 Subject: [PATCH 1/7] Two corrections --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a067556..0de9a44 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ yarn add redux-i18n **redux-i18n** offers your app the *t()* function to translate literals. -The *t()* function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the ** component from **redux-i18n**. +The *t()* function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the *>* component from **redux-i18n**. The *t()* function takes up to three arguments *t(textKey [, params, comments])*, where *textKey* is either the string to be translated or --- for pluralization --- an object as defined below. @@ -51,7 +51,7 @@ For the latter **redux-i18n** provides an action function creator *setTranslatio **redux-i18n** supports your store in plain JavaScript structures, but also if it is managed by help of *immutable.js*. -Finally, **redux-i18n** offers scripts to generate a translations object from po files that can be managed in [Poedit](https://poedit.net/)). +Finally, **redux-i18n** offers scripts to generate a translations object from po files that can be managed in [Poedit](https://poedit.net/). ## Usage From 0f5ddb1ade0375d0b7e532d8d2b160ac6d062de5 Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 13:03:23 +0100 Subject: [PATCH 2/7] Github markdown cannot show *< --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0de9a44..4953500 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ yarn add redux-i18n **redux-i18n** offers your app the *t()* function to translate literals. -The *t()* function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the *>* component from **redux-i18n**. +The *t()* function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n**. The *t()* function takes up to three arguments *t(textKey [, params, comments])*, where *textKey* is either the string to be translated or --- for pluralization --- an object as defined below. From aa28c6e48d0d51df50eee3398dd253c34dcd4e77 Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 13:11:25 +0100 Subject: [PATCH 3/7] use backtick consistently for inline code --- README.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 4953500..06e1460 100644 --- a/README.md +++ b/README.md @@ -36,18 +36,18 @@ yarn add redux-i18n **redux-i18n** offers your app the *t()* function to translate literals. -The *t()* function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n**. +The `t()` function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n**. -The *t()* function takes up to three arguments *t(textKey [, params, comments])*, where *textKey* is either the string to be translated or --- for pluralization --- an object as defined below. +The `t()` function takes up to three arguments `t(textKey [, params, comments])`, where `textKey` is either the string to be translated or --- for pluralization --- an object as defined below. -For setting the language in the redux store **redux-i18n** offers an action creator *setLanguage*. +For setting the language in the redux store **redux-i18n** offers an action creator `setLanguage`. To manage the translations in your React app, **redux-i18n** supports two choices: 1. load all your translations into a one big JS object 1. load your translations into a slice of your redux store -For the latter **redux-i18n** provides an action function creator *setTranslations*. As *setTranslations* is an action function creator you need to add *redux-thunk* to your middleware for it to work. +For the latter **redux-i18n** provides an action function creator `setTranslations`. As `setTranslations` is an action function creator you need to add *redux-thunk* to your middleware for it to work. **redux-i18n** supports your store in plain JavaScript structures, but also if it is managed by help of *immutable.js*. @@ -79,7 +79,7 @@ class Root extends React.Component { } ``` -Where *translations* is a dictionary similar to this: +Where `translations` is a dictionary similar to this: ```javascript export const translations = { @@ -101,7 +101,7 @@ You can also set the initial language with the *initialLang* prop: ``` -If you have partial translations, this means that you don't have your translations at 100% and you want to show untranslated literals in an other language, you can use the *fallbackLang* prop. +If you have partial translations, this means that you don't have your translations at 100% and you want to show untranslated literals in an other language, you can use the `fallbackLang` prop. ```javascript @@ -122,7 +122,7 @@ And this isn't in "de" language, it will show in "en". ## Redux Reducer -The language state is managed in a slice of the store named *i18nState*. Therefore, you have to add the **i18nState** reducer in your *combineReducers*. +The language state is managed in a slice of the store named `i18nState`. Therefore, you have to add the **i18nState** reducer in your `combineReducers`. ```javascript import {otherreducers} from "./Yourproject" @@ -137,9 +137,9 @@ const appReducer = combineReducers({ }) ``` -The current language is contained in the *lang* key of *i18nState*. +The current language is contained in the `lang` key of `i18nState`. -The *i18nState* is initially defined as +The `i18nState` is initially defined as ```javascript const defaultI18nState = { @@ -156,7 +156,7 @@ const defaultI18nState = new Map({ }) ``` -When you [map your state to props with connect](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) you can also access the *lang* attribute in your components: +When you [map your state to props with connect](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) you can also access the `lang` attribute in your components: ```javascript export default connect(state => ({ @@ -172,7 +172,7 @@ export default connect(state => ({ ## Translate literals -You can access the functions of ** using your component's context. For example: +You can access the functions of `` using your component's context. For example: ```javascript Home.contextTypes = { @@ -180,7 +180,7 @@ Home.contextTypes = { } ``` -...you will then be able to use the *t()* method in your component. +...you will then be able to use the `t()` method in your component. ```javascript render() { @@ -195,7 +195,7 @@ render() { } ``` -You can also use the *t()* function to change date formats +You can also use the `t()` function to change date formats ```javascript export const translations = { @@ -274,7 +274,7 @@ After extracting the translations to a POT file and opening it with Poedit you w ![Poedit screenshot](imgs/poedit2.jpg?raw=true "Poedit screenshot") -Also the *translations* object allows to set an options node. There you can set a plurals form rule and a plurals number. For example: +Also the `translations` object allows to set an options node. There you can set a plurals form rule and a plurals number. For example: ```javascript export const translations = { @@ -306,7 +306,7 @@ componentWillMount() { } ``` -If you work with combined languages like *es-ES*, *en-GB*, but your translations object doesn't include those properties... +If you work with combined languages like `"es-ES"`, `"en-GB"`, but your translations object doesn't include those properties... ```javascript export const translations = { @@ -319,11 +319,11 @@ export const translations = { } ``` -...*redux-i18n* will fallback on the closest property. In this case, *es* or *en*. +...*redux-i18n* will fallback on the closest property. In this case, `"es"` or `"en"`. ## Extract/Import scripts -*redux-i18n* includes a script to extract your translation strings to a .pot template which you can use in *Poedit*, and another to import strings from *po* files to a *translation.js*. +**redux-i18n** includes a script to extract your translation strings to a .pot template which you can use in *Poedit*, and another to import strings from *po* files to a `translation.js`. Add the scripts in your *package.json* for this purpose: @@ -349,7 +349,7 @@ npm run extract By default, this script will search for all literals inside your **src** folder with a regular expression and build a **locales/template.pot** file. This file can then be used in [Poedit](https://poedit.net/) to build *en.po*, *es.po*, etc. files. -If you want to set other source folder, you can use the *source* parameter. +If you want to set other source folder, you can use the `--source` switch. ```json "scripts": { @@ -376,7 +376,7 @@ By default this command find in all *.js* and *.jsx* file extensions, but you ca } ``` -The default regular expression will search all occurrences of *this.context.t* string, but you can also supply your own custom pattern, as in the following example: +The default regular expression will search all occurrences of `this.context.t` string, but you can also supply your own custom pattern, as in the following example: ```javascript export default function App({aProp, bProp}, {t: translate}) { @@ -384,7 +384,7 @@ export default function App({aProp, bProp}, {t: translate}) { } ``` -You will then need to set the --pattern flag in *package.json*: +You will then need to set the `--pattern` flag in *package.json*: ```json "scripts": { @@ -433,7 +433,7 @@ You can also change the encoding for your extraction from PO (default is iso-885 When applications grow, translations tend to bigger as well, adding a lot to the overall size of the js bundle. -You can set an empty translations object to the `` component and set the *useReducer* prop to true to use the store as the source of strings. For example: +You can set an empty translations object to the `` component and set the `useReducer` prop to true to use the store as the source of strings. For example: ```javascript @@ -443,7 +443,7 @@ You can set an empty translations object to the `` component and set the ``` -Then you can use the *setTranslations* action. +Then you can use the `setTranslations` action. ```javascript import {setTranslations} from 'redux-i18n' From b300a68edfc178f8484333325617094c4776916c Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 13:23:26 +0100 Subject: [PATCH 4/7] Consistent indent (like Prettify) --- README.md | 144 +++++++++++++++++++++++++++--------------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 06e1460..2949ef7 100644 --- a/README.md +++ b/README.md @@ -132,8 +132,8 @@ import {i18nState} from "redux-i18n" import {i18nState} from "redux-i18n/immutable" const appReducer = combineReducers({ - otherreducers, - i18nState + otherreducers, + i18nState }) ``` @@ -184,14 +184,14 @@ Home.contextTypes = { ```javascript render() { - return ( -
- Your current language, is: {this.props.lang}
- {this.context.t("Translate this text")}
- {this.context.t("Hello {n}!", {n: "World"})}

- -
- ) + return ( +
+ Your current language, is: {this.props.lang}
+ {this.context.t("Translate this text")}
+ {this.context.t("Hello {n}!", {n: "World"})}

+ +
+ ) } ``` @@ -208,12 +208,12 @@ export const translations = { ```javascript render() { - let today = moment() + let today = moment() return (
{today.format(this.context.t("YYYY-MM-DD"))}
- ) + ) } ``` @@ -221,14 +221,14 @@ Add comments for translators. ```javascript render() { - return ( -
- {this.context.t("Translate this text", {}, - "This is a comment for translators.")} - {this.context.t("Hello {n}!", {n: "Cesc"}, - "This is another comment.")} -
- ) + return ( +
+ {this.context.t("Translate this text", {}, + "This is a comment for translators.")} + {this.context.t("Hello {n}!", {n: "Cesc"}, + "This is another comment.")} +
+ ) } ``` @@ -302,7 +302,7 @@ Use the *setLanguage* action. import {setLanguage} from "redux-i18n" componentWillMount() { - this.props.dispatch(setLanguage("es")) + this.props.dispatch(setLanguage("es")) } ``` @@ -323,15 +323,15 @@ export const translations = { ## Extract/Import scripts -**redux-i18n** includes a script to extract your translation strings to a .pot template which you can use in *Poedit*, and another to import strings from *po* files to a `translation.js`. +**redux-i18n** includes a script to extract your translation strings to a *.pot* template which you can use in *Poedit*, and another to import strings from *po* files to a `translation.js`. Add the scripts in your *package.json* for this purpose: ```json - "scripts": { - "extract": "i18n_extract", - "import": "i18n_import" - } +"scripts": { + "extract": "i18n_extract", + "import": "i18n_import" +} ``` You can then run the following commands in your terminal: @@ -352,45 +352,45 @@ By default, this script will search for all literals inside your **src** folder If you want to set other source folder, you can use the `--source` switch. ```json - "scripts": { - "extract": "i18n_extract --source=mysourcefolder", - "import": "i18n_import" - } +"scripts": { + "extract": "i18n_extract --source=mysourcefolder", + "import": "i18n_import" +} ``` Or if you want to export your locales to a different folder... ```json - "scripts": { - "extract": "i18n_extract --source=mysourcefolder --locales=mylocalesfolder", - "import": "i18n_import" - } +"scripts": { + "extract": "i18n_extract --source=mysourcefolder --locales=mylocalesfolder", + "import": "i18n_import" +} ``` By default this command find in all *.js* and *.jsx* file extensions, but you can customize it with *fexts* parameter. Check out this example: ```json - "scripts": { - "extract": "i18n_extract --fexts=js,jsx,cofee", - "import": "i18n_import" - } +"scripts": { + "extract": "i18n_extract --fexts=js,jsx,cofee", + "import": "i18n_import" +} ``` The default regular expression will search all occurrences of `this.context.t` string, but you can also supply your own custom pattern, as in the following example: ```javascript export default function App({aProp, bProp}, {t: translate}) { - return
{translate('Hello world!')}
; + return
{translate('Hello world!')}
; } ``` You will then need to set the `--pattern` flag in *package.json*: ```json - "scripts": { - "extract": "i18n_extract --pattern=translate", - "import": "i18n_import" - } +"scripts": { + "extract": "i18n_extract --pattern=translate", + "import": "i18n_import" +} ``` ### Import .po files @@ -406,27 +406,27 @@ This script read all *po* files inside your *locales* folder, extract all transl You can also set another *locales* folder: ```json - "scripts": { - "extract": "i18n_extract --source=mysource --locales=mylocales", - "import": "i18n_import --locales=mylocales" - } +"scripts": { + "extract": "i18n_extract --source=mysource --locales=mylocales", + "import": "i18n_import --locales=mylocales" +} ``` Or, save *translation.js* to a different location: ```json - "scripts": { - "extract": "i18n_extract --source=mysource --locales=mylocales", - "import": "i18n_import --locales=mylocales --translations=myfolder" - } +"scripts": { + "extract": "i18n_extract --source=mysource --locales=mylocales", + "import": "i18n_import --locales=mylocales --translations=myfolder" +} ``` You can also change the encoding for your extraction from PO (default is iso-8859-1) ```json - "scripts": { - "extract": "i18n_extract --source=mysource --locales=mylocales", - "import": "i18n_import --encoding=utf-8" - } +"scripts": { + "extract": "i18n_extract --source=mysource --locales=mylocales", + "import": "i18n_import --encoding=utf-8" +} ``` ## Async translations @@ -436,11 +436,11 @@ When applications grow, translations tend to bigger as well, adding a lot to the You can set an empty translations object to the `` component and set the `useReducer` prop to true to use the store as the source of strings. For example: ```javascript - - - - - + + + + + ``` Then you can use the `setTranslations` action. @@ -478,29 +478,29 @@ Sometimes language is set initially by the redux store creation, or in an isomor If you want to isolate the use of context from your components, you can import the Localize Hoc to provide the translate function as a prop to your component. For example: ```javascript - import { localize } from 'redux-i18n' +import { localize } from 'redux-i18n' - class SomeComponent extends Component { - render() { - return this.props.t('hello world') - } +class SomeComponent extends Component { + render() { + return this.props.t('hello world') } +} - export default localize()(SomeComponent) +export default localize()(SomeComponent) ``` You can also change the name of the provided prop: ```javascript - import { localize } from 'redux-i18n' +import { localize } from 'redux-i18n' - class SomeComponent extends Component { - render() { - return this.props.translate('hello world') - } +class SomeComponent extends Component { + render() { + return this.props.translate('hello world') } +} - export default localize('translate')(SomeComponent) +export default localize('translate')(SomeComponent) ``` --- From 5bdbeb4b1e95394a5b20462a422890d773c249e0 Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 13:24:17 +0100 Subject: [PATCH 5/7] I not i --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2949ef7..a200540 100644 --- a/README.md +++ b/README.md @@ -433,7 +433,7 @@ You can also change the encoding for your extraction from PO (default is iso-885 When applications grow, translations tend to bigger as well, adding a lot to the overall size of the js bundle. -You can set an empty translations object to the `` component and set the `useReducer` prop to true to use the store as the source of strings. For example: +You can set an empty translations object to the `` component and set the `useReducer` prop to true to use the store as the source of strings. For example: ```javascript From 415b196801181e6a036b155f9b82102f7dcc2aed Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 15:22:52 +0100 Subject: [PATCH 6/7] hint for contextTypes --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a200540..ac7357b 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,17 @@ yarn add redux-i18n **redux-i18n** offers your app the *t()* function to translate literals. -The `t()` function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n**. +The `t()` function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n** that provides for the context. Furthermore, for all components that want to use the `t()` function you need to define `contextTypes`, e.g.: + +```javascript +import PropTypes from 'prop-types' + +MyComponent.contextTypes = { + t: PropTypes.func +} +``` + +If `contextTypes` is not defined, then context will be an empty object. The `t()` function takes up to three arguments `t(textKey [, params, comments])`, where `textKey` is either the string to be translated or --- for pluralization --- an object as defined below. From 1be5f01997a6baa46884608b627b1f48eba5937f Mon Sep 17 00:00:00 2001 From: Karl Anders Date: Tue, 14 Nov 2017 15:28:08 +0100 Subject: [PATCH 7/7] add MyComponent --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index ac7357b..6e0e1fb 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,15 @@ yarn add redux-i18n The `t()` function is available in the components of your app via React [context](https://reactjs.org/docs/context.html). To achieve this you need to wrap your app into the `` component from **redux-i18n** that provides for the context. Furthermore, for all components that want to use the `t()` function you need to define `contextTypes`, e.g.: ```javascript +// import ... import PropTypes from 'prop-types' +class MyComponent extends React.Component { + render() { + return
{this.context.t("Hello World!")}
+ } +} + MyComponent.contextTypes = { t: PropTypes.func }