Merge 4d5d34f into 27b72e4

packages/react-i18n/README.md

@@ -20,7 +20,7 @@ Add the provider above a component to configure and provide translation function
 
 ```jsx harmony
 // Import the provider
-import { I18nProvider } from '@m6we/react-i18n';
+import { I18nProvider } from '@m6web/react-i18n';
 
 // Dictionnary for your app, you should have a different dictionary for each language
 const translations = {
@@ -51,7 +51,7 @@ This component needs React 16 at least because its render returns a string value
 
 ```jsx harmony
 import React from 'react';
-import { Trans } from '@m6we/react-i18n';
+import { Trans } from '@m6web/react-i18n';
 
 // Interpolation values
 const data = { element: 'foo' };
@@ -79,7 +79,7 @@ export default const MyComponent = ({ nbExample, t }) => {
 
 ```jsx harmony
 import React from 'react';
-import { HtmlTrans } from '@m6we/react-i18n';
+import { HtmlTrans } from '@m6web/react-i18n';
 
 // Interpolation values
 const data = { element: 'foo' };
@@ -98,7 +98,7 @@ export default const MyComponent = ({ nbExample, t }) => {
 * **number**: amount used for plural forms
 * **data**: object containing key/values used for interpolation in the translation
 * **general**: use general plural form if truthy
-* **element**: HTML element, or React element used for rendering. (default value: `span`) 
+* **element**: HTML element, or React element used for rendering. (default value: `span`)
 
 Note that **number** and **data** can be used together.
 
@@ -108,7 +108,7 @@ This HOC provides the translate function to the component as prop.
 
 ```jsx harmony
 import React from 'react';
-import { translate } from '@m6we/react-i18n';
+import { translate } from '@m6web/react-i18n';
 
 // Interpolation values
 const data = { element: 'foo' };
@@ -137,12 +137,39 @@ export default translate(MyComponent);
 
 Note that **number** and **data** can be used together.
 
+### useTranslate hook
+
+This hook provides the `t` function in a functional component.
+
+```jsx harmony
+import React from 'react';
+import { useTranslate } from '@m6web/react-i18n';
+
+// Interpolation values
+const data = { element: 'foo' };
+
+export const MyComponent = ({ nbExample }) => {
+  const t = useTranslate();
+
+  return (
+    <div class="foo">
+      <h1>
+        {t('foo.bar')}
+      </h1>
+      <p>
+        {t('foo.exemple', data, nbExample, true)}
+      </p>
+    </div>
+  );
+};
+```
+
 ### BuildList
 
 Build list function allows you to build a list in specific language.
 
 ```jsx harmony
-import { buildListFunction } from '@m6we/react-i18n';
+import { buildListFunction } from '@m6web/react-i18n';
 
 // Define separators with translations
 const lang = {

packages/react-i18n/src/components/__tests__/i18n.container.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { translate } from '../i18n.container';
 
-jest.mock('../i18n.context');
+jest.mock('../../context/i18n.context');
 
 describe('i18n container', () => {
   const DummyComponent = props => <div {...props} />;

packages/react-i18n/src/components/__tests__/i18nElement.component.spec.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { HtmlTrans } from '../i18nElement.component';
 
-jest.mock('../i18n.context', () => ({
-  Consumer: jest.fn(({ children}) => children(x => `<div>${x}</div>`))
+jest.mock('../../context/i18n.context', () => ({
+  Context: {
+    Consumer: jest.fn(({ children}) => children(x => `<div>${x}</div>`))
+  }
 }));
 
 describe('i18n.renderProps', () => {

packages/react-i18n/src/components/__tests__/i18nString.component.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Trans } from '../i18nString.component';
 
-jest.mock('../i18n.context');
+jest.mock('../../context/i18n.context');
 
 describe('i18n.renderProps', () => {
 

packages/react-i18n/src/components/i18n.container.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import { Context } from '../context/i18n.context';
 
 export const translate = RenderComponent => {
   const TranslatedComponent = props => (
-    <Consumer>
+    <Context.Consumer>
       {t => {
         if (props.componentRef) {
           return <RenderComponent t={t} {...props} ref={element => props.componentRef(element)} />;
         }
 
         return <RenderComponent t={t} {...props} />;
       }}
-    </Consumer>
+    </Context.Consumer>
   );
 
   TranslatedComponent.propTypes = {

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 '../context/i18n.context';
 
 export const I18nProvider = ({ lang, i18nNames, children }) => (
-  <Provider value={translate(lang, i18nNames)}>{children}</Provider>
+  <Context.Provider value={translate(lang, i18nNames)}>{children}</Context.Provider>
 );
 
 I18nProvider.propTypes = {

packages/react-i18n/src/components/i18nElement.component.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import { Context } from '../context/i18n.context';
 
 export const HtmlTrans = ({ i18nKey, data, number, general, element: Element, ...props }) => (
-  <Consumer>
+  <Context.Consumer>
     {t => <Element {...props} dangerouslySetInnerHTML={{ __html: t(i18nKey, data, number, general) }} />}
-  </Consumer>
+  </Context.Consumer>
 );
 
 HtmlTrans.defaultProps = {
@@ -15,7 +15,7 @@ HtmlTrans.defaultProps = {
 };
 
 HtmlTrans.propTypes = {
-  element: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  element: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
   i18nKey: PropTypes.string.isRequired,
   data: PropTypes.object,
   number: PropTypes.number,

packages/react-i18n/src/components/i18nString.component.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Consumer } from './i18n.context';
+import { Context } from './../context/i18n.context';
 
 export const Trans = ({ i18nKey, data, number, general }) => (
-  <Consumer>{t => t(i18nKey, data, number, general)}</Consumer>
+  <Context.Consumer>{t => t(i18nKey, data, number, general)}</Context.Consumer>
 );
 
 Trans.defaultProps = {

packages/react-i18n/src/context/__mocks__/i18n.context.js

@@ -0,0 +1,7 @@
+const Provider = jest.fn(x => x);
+Provider.displayName = 'Provider';
+
+const Consumer = jest.fn(({ children}) => children(jest.fn(x => x)));
+Consumer.displayName = 'Consumer';
+
+export const Context = { Provider, Consumer };

packages/react-i18n/src/context/i18n.context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Context = React.createContext();

packages/react-i18n/src/hooks/__tests__/useTranslate.spec.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Context } from '../../context/i18n.context';
+import { useTranslate } from '../useTranslate';
+
+jest.mock('react');
+
+useContext.mockReturnValue('t function');
+
+describe('useTranslate', () => {
+  it('should return the translation function', () => {
+    const t = useTranslate();
+
+    expect(useContext).toHaveBeenCalledWith(Context);
+    expect(t).toBe('t function');
+  });
+});

packages/react-i18n/src/hooks/useTranslate.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { Context } from '../context/i18n.context';
+
+export const useTranslate = () => useContext(Context);