diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md
index ff00cb1e837da..17d9032442d41 100644
--- a/packages/kbn-i18n/README.md
+++ b/packages/kbn-i18n/README.md
@@ -252,22 +252,52 @@ and added as a comment next to translation message at `defaultMessages.json`
#### Attributes translation in React
-React wrapper provides an API to inject the imperative formatting API into a React
-component by using render callback pattern. This should be used when your React
-component needs to format data to a string value where a React element is not
-suitable; e.g., a `title` or `aria` attribute. In order to use it, you should
-wrap your components into `I18nContext` component. The child of this component
-should be a function that takes `intl` object into parameters:
+
+React wrapper provides an ability to inject the imperative formatting API into a React component via its props using `injectI18n` Higher-Order Component. This should be used when your React component needs to format data to a string value where a React element is not suitable; e.g., a `title` or `aria` attribute. In order to use it you should wrap your component with `injectI18n` Higher-Order Component. The formatting API will be provided to the wrapped component via `props.intl`.
+
+React component as a pure function:
+
+```js
+import React from 'react';
+import { ReactI18n } from '@kbn/i18n';
+
+const { injectI18n, intlShape } = ReactI18n;
+
+const MyComponentContent = ({ intl }) => (
+
+);
+
+MyComponentContent.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export const MyComponent = injectI18n(MyComponentContent);
+```
+
+React component as a class:
```js
import React from 'react';
+import PropTypes from 'prop-types';
import { ReactI18n } from '@kbn/i18n';
-const { I18nContext } = ReactI18n;
+const { injectI18n, intlShape } = ReactI18n;
+
+class MyComponentContent extends React.Component {
+ static propTypes = {
+ intl: intlShape.isRequired,
+ };
-const MyComponent = () => (
-
- {intl => (
+ render() {
+ const { intl } = this.props;
+
+ return (
(
defaultMessage: 'Search',
})}
/>
- )}
-
-);
+ );
+ }
+}
+
+export const MyComponent = injectI18n(MyComponentContent);
```
## Angular
diff --git a/packages/kbn-i18n/src/react/index.js b/packages/kbn-i18n/src/react/index.js
index f80dd27268f96..9619d2c8d162e 100644
--- a/packages/kbn-i18n/src/react/index.js
+++ b/packages/kbn-i18n/src/react/index.js
@@ -29,4 +29,4 @@ export {
} from 'react-intl';
export { I18nProvider } from './provider';
-export { I18nContext } from './context';
+export { injectI18n } from './inject';
diff --git a/packages/kbn-i18n/src/react/context.js b/packages/kbn-i18n/src/react/inject.js
similarity index 54%
rename from packages/kbn-i18n/src/react/context.js
rename to packages/kbn-i18n/src/react/inject.js
index df7c8877725fb..4520709657f20 100644
--- a/packages/kbn-i18n/src/react/context.js
+++ b/packages/kbn-i18n/src/react/inject.js
@@ -17,34 +17,10 @@
* under the License.
*/
-import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { intlShape } from 'react-intl';
-
/**
- * Provides intl context to a child component using React render callback pattern
- * @example
- *
- * {intl => (
- *
- * )}
- *
+ * Higher-Order Component is used for injecting intl prop into wrapped
+ * component and encapsulate direct work with React context.
+ * More docs and examples can be found here https://github.com/yahoo/react-intl/wiki/API#injection-api
*/
-export class I18nContext extends PureComponent {
- static propTypes = {
- children: PropTypes.func.isRequired,
- };
-
- static contextTypes = {
- intl: intlShape,
- };
- render() {
- return this.props.children(this.context.intl);
- }
-}
+export { injectIntl as injectI18n } from 'react-intl';