diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 4f03fae..af0daa8 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -12,7 +12,7 @@
],
"peerDependencies": {
"prop-types": "^15.6.2",
- "react": "^16.4.2"
+ "react": "^16.7.0"
},
"jest": {
"timers": "fake"
@@ -36,6 +36,7 @@
},
"dependencies": {
"lodash": "4.17.10",
+ "react": "16.7.0-alpha.0",
"sprintf-js": "1.1.1"
},
"publishConfig": {
diff --git a/packages/react-i18n/src/components/i18n.container.js b/packages/react-i18n/src/components/i18n.container.js
index 72c563f..069e6c8 100644
--- a/packages/react-i18n/src/components/i18n.container.js
+++ b/packages/react-i18n/src/components/i18n.container.js
@@ -1,19 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
export const translate = RenderComponent => {
- const TranslatedComponent = props => (
-
- {t => {
- if (props.componentRef) {
- return props.componentRef(element)} />;
- }
+ const TranslatedComponent = props => {
+ const t = useContext(context);
- return ;
- }}
-
- );
+ if (props.componentRef) {
+ return props.componentRef(element)} />;
+ }
+
+ return ;
+ };
TranslatedComponent.propTypes = {
componentRef: PropTypes.func,
diff --git a/packages/react-i18n/src/components/i18n.context.js b/packages/react-i18n/src/components/i18n.context.js
index 2ba8f00..a40acaf 100644
--- a/packages/react-i18n/src/components/i18n.context.js
+++ b/packages/react-i18n/src/components/i18n.context.js
@@ -1,3 +1,3 @@
import React from 'react';
-export const { Provider, Consumer } = React.createContext('translation');
+export default React.createContext('translation');
diff --git a/packages/react-i18n/src/components/i18n.provider.js b/packages/react-i18n/src/components/i18n.provider.js
index 8dea86a..f76ada2 100644
--- a/packages/react-i18n/src/components/i18n.provider.js
+++ b/packages/react-i18n/src/components/i18n.provider.js
@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { translate } from '../utils/i18n.utils';
-import { Provider } from './i18n.context';
+import Context from './i18n.context';
export const I18nProvider = ({ lang, i18nNames, children }) => (
- {children}
+ {children}
);
I18nProvider.propTypes = {
diff --git a/packages/react-i18n/src/components/i18nElement.component.js b/packages/react-i18n/src/components/i18nElement.component.js
index 00f21c1..b7fa363 100644
--- a/packages/react-i18n/src/components/i18nElement.component.js
+++ b/packages/react-i18n/src/components/i18nElement.component.js
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
-export const HtmlTrans = ({ i18nKey, data, number, general, element: Element, ...props }) => (
-
- {t => }
-
-);
+export const HtmlTrans = ({ i18nKey, data, number, general, element: Element, ...props }) => {
+ const t = useContext(context);
+
+ return ;
+};
HtmlTrans.defaultProps = {
element: 'span',
diff --git a/packages/react-i18n/src/components/i18nString.component.js b/packages/react-i18n/src/components/i18nString.component.js
index b1f3c24..6d25f7c 100644
--- a/packages/react-i18n/src/components/i18nString.component.js
+++ b/packages/react-i18n/src/components/i18nString.component.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import context from './i18n.context';
-export const Trans = ({ i18nKey, data, number, general }) => (
- {t => t(i18nKey, data, number, general)}
-);
+export const Trans = ({ i18nKey, data, number, general }) => {
+ const t = useContext(context)
+
+ return t(i18nKey, data, number, general);
+};
Trans.defaultProps = {
data: {},