You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+2-12
Original file line number
Diff line number
Diff line change
@@ -6,11 +6,7 @@
6
6
7
7
AKA: **3RMXi** (for the sake of brevity!)
8
8
9
-
❕❕ **New:** Now supports Internationalization!
10
-
11
-
❕❕ **New:** i18n now supports nested language resource objects for a better structuring!
12
-
13
-
This project is a personal boilerplate as a quickstart for development with [react-create-app](https://github.com/facebookincubator/create-react-app) + [react-router](https://github.com/ReactTraining/react-router) and [MobX](https://github.com/mobxjs/mobx) to maintain the state of the App.
9
+
This project is a personal boilerplate as a quickstart for development with [react-create-app](https://github.com/facebookincubator/create-react-app) + [React Router 4](https://github.com/ReactTraining/react-router) and [MobX](https://github.com/mobxjs/mobx) to maintain the state of the App.
14
10
15
11
This boilerplate implements [custom-react-scripts](https://github.com/kitze/custom-react-scripts) to be able to implement @decorators and CSS Modules for Sass/Less/Stylus implementations.
16
12
@@ -93,7 +89,7 @@ As you can see, we've defined for example a `CHANGE_SPANISH` key with a value of
93
89
94
90
At the very last line of the file, we export this object to access it from the `Language Store`.
95
91
96
-
Note that this **Keys** should be exactly the same in each of the language folders you create. If the key resource is not found
92
+
Note that this **Keys** should be exactly the same in each of the language files you create. If the key resource is not found
97
93
nothing will be shown (I don't want to throw exceptions and all that stuff that breaks and stops the app). If you want it, you can create a function that process the required key resource to see if it exists or it's not empty and the `Language` component.
98
94
99
95
Now, to change the current App Language you only need to call (previously injected language store at the desired component) `this.props.language.changeLanguageTo('es')` from anywhere inside that component (an onClick={} method for example) and if it's a valid key the one you passed to the method it will automatically change the language, the resources and re-render the `<Language resource="CHANGE_SPANISH" />` with the new `CHANGE_SPANISH` value, in this case, will replace _'Change to Spanish'_ with _'Cambiar a Español'_. It's not that hard, see?
@@ -102,12 +98,6 @@ You can also see that you have the possibility to use **nested language resource
102
98
103
99
**Note:** You should look at the `<Language />` react component located at `src/components/language` to see that it's not a big deal, it just injects the `LanguageStore` and being an `@observer` so it will re-render when an `@observable` property (in this case, `language.resource[resource]`) has changed.
104
100
105
-
**Pending Internationalization Tasks:**
106
-
107
-
✅ Expose the current language value to check it at any point/state of the App.
0 commit comments