Use injectI18n Higher-Order Component instead of I18nContext (#20542)
* add implementation of I18nContext, docs for injectI18n hoc * remove i18nContext wrapper, add docs for react components as classes
This commit is contained in:
parent
ecefab55e6
commit
92774b7b09
3 changed files with 50 additions and 42 deletions
|
@ -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 { I18nContext } = ReactI18n;
|
||||
const { injectI18n, intlShape } = ReactI18n;
|
||||
|
||||
const MyComponent = () => (
|
||||
<I18nContext>
|
||||
{intl => (
|
||||
const MyComponentContent = ({ intl }) => (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
|
||||
defaultMessage: 'Search',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
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 { injectI18n, intlShape } = ReactI18n;
|
||||
|
||||
class MyComponentContent extends React.Component {
|
||||
static propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={intl.formatMessage({
|
||||
|
@ -275,9 +305,11 @@ const MyComponent = () => (
|
|||
defaultMessage: 'Search',
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</I18nContext>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const MyComponent = injectI18n(MyComponentContent);
|
||||
```
|
||||
|
||||
## Angular
|
||||
|
|
|
@ -29,4 +29,4 @@ export {
|
|||
} from 'react-intl';
|
||||
|
||||
export { I18nProvider } from './provider';
|
||||
export { I18nContext } from './context';
|
||||
export { injectI18n } from './inject';
|
||||
|
|
|
@ -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
|
||||
* <I18nContext>
|
||||
* {intl => (
|
||||
* <input
|
||||
* placeholder={intl.formatMessage({
|
||||
id: 'my-id',
|
||||
defaultMessage: 'my default message',
|
||||
})}
|
||||
* />
|
||||
* )}
|
||||
* </I18nContext>
|
||||
* 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';
|
Loading…
Reference in a new issue