@wordpress/react-i18n Edit

React bindings for @wordpress/i18n.

Installation #Installation

Install the module:

npm install @wordpress/react-i18n

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Top ↑

API #API

Top ↑

I18nProvider #I18nProvider

The I18nProvider should be mounted above any localized components:

Usage

import { createI18n } from '@wordpress/react-i18n';
import { I18nProvider } from '@wordpress/react-i18n';
const i18n = createI18n();

ReactDom.render(
    <I18nProvider i18n={ i18n }>
        <App />
    </I18nProvider>,
    el
);

You can also instantiate the provider without the i18n prop. In that case it will use the
default I18n instance exported from @wordpress/i18n.

Parameters

• props I18nProviderProps: i18n provider props.

Returns

• JSX.Element: Children wrapped in the I18nProvider.

Top ↑

useI18n #useI18n

React hook providing access to i18n functions. It exposes the __, _x, _n, _nx,
isRTL and hasTranslation functions from @wordpress/i18n.
Refer to their documentation there.

Usage

import { useI18n } from '@wordpress/react-i18n';

function MyComponent() {
    const { __ } = useI18n();
    return __( 'Hello, world!' );
}

Top ↑

withI18n #withI18n

React higher-order component that passes the i18n translate functions (the same set
as exposed by the useI18n hook) to the wrapped component as props.

Usage

import { withI18n } from '@wordpress/react-i18n';

function MyComponent( { __ } ) {
    return __( 'Hello, world!' );
}

export default withI18n( MyComponent );

Parameters

• InnerComponent ComponentType< P >: React component to be wrapped and receive the i18n functions like __

Returns

• FunctionComponent< PropsAndI18n< P > >: The wrapped component