React bindings for @wordpress/i18n
.
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.
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.
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!' );
}
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