Title: @wordpress/react-i18n
Published: March 9, 2021
Last modified: March 27, 2026

---

# @wordpress/react-i18n

## In this article

 * [Installation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#installation)
 * [API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#api)
    - [I18nProvider](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#i18nprovider)
    - [useI18n](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#usei18n)
    - [withI18n](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#withi18n)
 * [Contributing to this package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#contributing-to-this-package)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#wp--skip-link--target)

React bindings for [`@wordpress/i18n`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/../i18n?output_format=md).

## 󠀁[Installation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#installation)󠁿

Install the module:

    ```language-sh
    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`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill)
in your code._

## 󠀁[API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#api)󠁿

### 󠀁[I18nProvider](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#i18nprovider)󠁿

The `I18nProvider` should be mounted above any localized components:

_Usage_

    ```javascript
    import { createI18n } from '@wordpress/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_

 * Children wrapped in the I18nProvider.

### 󠀁[useI18n](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#usei18n)󠁿

React hook providing access to i18n functions. It exposes the `__`, `_x`, `_n`, `
_nx`, `isRTL` and `hasTranslation` functions from [`@wordpress/i18n`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/../i18n?output_format=md).
Refer to their documentation there.

_Usage_

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

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

### 󠀁[withI18n](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#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_

    ```javascript
    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

## 󠀁[Contributing to this package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-react-i18n/?output_format=md#contributing-to-this-package)󠁿

This is an individual package that’s part of the Gutenberg project. The project 
is organized as a monorepo. It’s made up of multiple self-contained software packages,
each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/)
and used by [WordPress](https://make.wordpress.org/core/) as well as other software
projects.

To find out more about contributing to this package or Gutenberg as a whole, please
read the project’s main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

First published

March 9, 2021

Last updated

March 27, 2026

Edit article

[ Improve it on GitHub: @wordpress/react-i18n ](https://github.com/WordPress/gutenberg/edit/trunk/packages/react-i18n/README.md)

[  Previous: @wordpress/project-management-automation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-project-management-automation/)

[  Next: @wordpress/readable-js-assets-webpack-plugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-readable-js-assets-webpack-plugin/)