diff --git a/README.md b/README.md
index 3f254a4..32d5f6f 100644
--- a/README.md
+++ b/README.md
@@ -62,6 +62,7 @@ Features
* PostCSS ( with CSS modules activated by default )
* Webpack 4
* Reselect
+* i18n / i10n supports ( react-intl )
* Lazy Loading component supports
* Type Checking with Babel Type Check ( Flow syntax )
* ESLint for syntax check
@@ -533,6 +534,10 @@ This boilerplate will be maintained separately. So please do not check in any b
## Updates
+__04 / 30 / 2019__
+
+Adding i18n / i10n support by adding [react-intl](https://github.com/yahoo/react-intl)
+
__10 / 25 / 2018__
We are now on Webpack 4 and React 16.4, plus up-to-date with all our dependencies.
@@ -557,17 +562,6 @@ If you are using mac, you can fix that by doing this
`brew install automake autoconf libtool dpkg pkgconfig nasm libpng`
-__7 / 15 / 2017__
-
-We added Enzyme to make React unit testing easier :)
-
-__6 / 20 / 2017__
-
-Webpack 3 just announced yesterday, we are so excited about it, thus we also upgraded this boilerplate to use `Webpack 3`.
-
-If you encounter issues related to `Webpack 3`, it is good to report that back so the community can benefit from it.
-
-
## License ?!
In theory, knowledge should be free, so please visit [wtfpl](http://www.wtfpl.net/) for this boilerplate license if you really care.
diff --git a/package.json b/package.json
index e5536a9..362d152 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-redux-boilerplate",
- "version": "1.2.4",
+ "version": "1.3.4",
"description": "React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.",
"scripts": {
"dev": "cross-env NODE_ENV=development DASHBOARD_PORT=9901 webpack-dashboard -p 9901 -c red -t dashboard -- node bin/commands.js dev",
@@ -93,10 +93,11 @@
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-helmet": "^5.2.0",
+ "react-intl": "^2.8.0",
"react-loadable": "^5.5.0",
- "react-redux": "^6.0.1",
- "react-router": "^4.3.1",
- "react-router-dom": "^4.3.1",
+ "react-redux": "^7.0.3",
+ "react-router": "^5.0.0",
+ "react-router-dom": "^5.0.0",
"react-router-redux": "^4.0.8",
"redux": "^4.0.1",
"redux-actions": "^2.6.4",
diff --git a/src/js/Root.jsx b/src/js/Root.jsx
index 4d8baae..aac154f 100644
--- a/src/js/Root.jsx
+++ b/src/js/Root.jsx
@@ -5,6 +5,7 @@ import { Provider } from 'react-redux'
// But passing in history directly to Route will
// give your app more flexibility on deeper integration of `history`
import { Router } from 'react-router-dom'
+import { IntlProvider } from 'react-intl'
export default class Root extends Component {
get content() {
@@ -21,9 +22,11 @@ export default class Root extends Component {
const { store } = this.props
return (
-
- {this.content}
-
+
+
+ {this.content}
+
+
)
}
}
diff --git a/src/js/app-history.js b/src/js/app-history.js
index c7c9597..976bd50 100644
--- a/src/js/app-history.js
+++ b/src/js/app-history.js
@@ -10,9 +10,9 @@
// don't make changes in here.
// import createHistory from 'history/createBrowserHistory'
-import createHistory from 'history/createHashHistory'
+import { createHashHistory } from 'history'
-const history = createHistory()
+const history = createHashHistory()
// Exposing history for deep integration needs
// For example, saga and utilities
diff --git a/src/js/views/example/View.jsx b/src/js/views/example/View.jsx
index ab502d7..4d02cc1 100644
--- a/src/js/views/example/View.jsx
+++ b/src/js/views/example/View.jsx
@@ -2,28 +2,32 @@ import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
+// This is i18n and i10n
+import {
+ FormattedMessage,
+ FormattedDate,
+ FormattedTime,
+} from 'react-intl'
+
import LazyLoading from '../../common/components/LazyLoading'
import { actions as exampleActions } from '../../redux/modules/example'
import { exampleSelector } from '../../redux/selectors/exampleSelector'
import { ExampleWithError } from '../../common/components/Example'
import { ErrorBoundary } from '../../common/components/Utilities'
+// This is lazy loading example
const LazyExample = LazyLoading(() => import('../../common/components/Example/Example'))
-const mapStateToProps = (state) => ({
- example: exampleSelector(state),
-})
-
-const mapDispatchToProps = {
- ...exampleActions,
-}
-
-@connect(mapStateToProps, mapDispatchToProps)
class ExampleView extends Component {
static propTypes = {
example: PropTypes.object.isRequired,
}
+ state = {
+ myArbitraryNumber: Math.floor(Math.random() * 10000),
+ currentTime: new Date(),
+ }
+
componentDidMount() {
const { getAwesomeCode } = this.props
@@ -31,9 +35,34 @@ class ExampleView extends Component {
}
render() {
+ const {
+ myArbitraryNumber,
+ currentTime,
+ } = this.state
+
return (
+ This framework supports i18n and i10n out of the box.
+ Visitor,
+ myArbitraryNumber,
+ }}
+ />
+
+ The date is:
+
+
+
+ The time is:
+
+
@@ -42,4 +71,15 @@ class ExampleView extends Component {
}
}
-export default ExampleView
+const mapStateToProps = (state) => ({
+ example: exampleSelector(state),
+})
+
+const mapDispatchToProps = {
+ ...exampleActions,
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ExampleView)