diff --git a/README.md b/README.md
index ccc44d9f6..ea61d2956 100644
--- a/README.md
+++ b/README.md
@@ -72,12 +72,12 @@ In order to enable localization for a Canon site, you must first define the avai
export CANON_LANGUAGES="en,es"
```
-Next, any component that needs access to localized text needs to be wrapped in the react-i18next translate function:
+Next, any component that needs access to localized text needs to be wrapped in the react-i18next `withNamespaces` function:
```jsx
import React, {Component} from "react";
import {Link} from "react-router";
-import {translate} from "react-i18next";
+import {withNamespaces} from "react-i18next";
class Nav extends Component {
@@ -95,10 +95,10 @@ class Nav extends Component {
}
}
-export default translate()(Nav);
+export default withNamespaces()(Nav);
```
-When a component is wrapped with `translate`, it will have access to a function named `t` inside it's props. This function is what handles fetching the appropriate translation, and also allows us to scrape an entire project to locate every string that needs translation. When you are ready to start populating translations, simply run `npm run locales`.
+When a component is wrapped with `withNamespaces`, it will have access to a function named `t` inside it's props. This function is what handles fetching the appropriate translation, and also allows us to scrape an entire project to locate every string that needs translation. When you are ready to start populating translations, simply run `npm run locales`.
Canon will search your entire codebase for any component using the `t( )` function. Translations are stored in JSON files in a `locales/` folder in the root directory. In this example, running the script would produce the following file structure:
diff --git a/app/App.jsx b/app/App.jsx
index 870d7f2b1..377a0d9fe 100755
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -20,17 +20,15 @@ class App extends Component {
render() {
const {children} = this.props;
// console.log(this.props.env);
- return (
-
-
-
-
-
-
- { children }
-
-
- );
+ return
+
+
+
+
+
+
{ children }
+
+
;
}
}
diff --git a/app/components/Loading.jsx b/app/components/Loading.jsx
index fdf9e4062..bff7558d4 100644
--- a/app/components/Loading.jsx
+++ b/app/components/Loading.jsx
@@ -1,6 +1,6 @@
import React, {Component} from "react";
import {connect} from "react-redux";
-import {translate} from "react-i18next";
+import {withNamespaces} from "react-i18next";
import {NonIdealState, ProgressBar} from "@blueprintjs/core";
import "./Loading.css";
@@ -15,12 +15,12 @@ class Loading extends Component {
}
}
-export default translate()(connect(
- (state, ownProps) => "total" in ownProps ? ({
+export default withNamespaces()(connect(
+ (state, ownProps) => "total" in ownProps ? {
total: ownProps.total,
progress: ownProps.progress
- }) : ({
+ } : {
total: state.loadingProgress.requests,
progress: state.loadingProgress.fulfilled
- })
+ }
)(Loading));
diff --git a/app/pages/Home.jsx b/app/pages/Home.jsx
index 27bd3b0fe..b14ecfc9e 100644
--- a/app/pages/Home.jsx
+++ b/app/pages/Home.jsx
@@ -1,10 +1,10 @@
import React, {Component} from "react";
import {Link} from "react-router";
-import {translate, Trans} from "react-i18next";
+import {withNamespaces, Trans} from "react-i18next";
import "./Home.css";
import {Button} from "@blueprintjs/core";
import {Activate} from "../../src/";
-import Vizbuilder from "@datawheel/canon-vizbuilder";
+// import Vizbuilder from "@datawheel/canon-vizbuilder";
// import styles from "style.yml";
@@ -28,7 +28,7 @@ class Home extends Component {
Hello {{name}}, you have {{count}} unread message. Click here.
-
+