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';