@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 ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Top ↑

API #API

# 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 “: i18n provider props.

Returns

• “: Children wrapped in the I18nProvider.

# 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!' );
}

# 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 “: React component to be wrapped and receive the i18n functions like __

Returns

• “: The wrapped component