@wordpress/react-i18n

React bindings for @wordpress/i18n.

Usage no npm install needed!

<script type="module">
  import wordpressReactI18n from 'https://cdn.skypack.dev/@wordpress/react-i18n';
</script>

README

React Bindings for I18n

React bindings for @wordpress/i18n.

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.

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

Returns

  • JSX.Element: 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 ComponentType< P >: React component to be wrapped and receive the i18n functions like __

Returns

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



Code is Poetry.