@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.
API API
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.
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!' ); }
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