i18n/I18nDecorator

Adds Internationalization (I18N) support to an application using ilib.

Members

I18nDecorator Higher-Order Component

A higher-order component that is used to wrap the root element in an app. It provides an rtl member on the context of the wrapped component, allowing the children to check the current text directionality as well as an updateLocale method that can be used to update the current locale.

There are no configurable options on this HOC.

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node.

Configuration

latinLanguageOverrides

Array(String)

Array of locales that should be treated as latin regardless of their script.

Default: null

nonLatinLanguageOverrides

Array(String)

Array of locales that should be treated as non-latin regardless of their script.

Default: null

resources

Array(FunctionObject)

Array of resource loaders to be invoked after a locale change.

Each loader must be a function which accepts an object and returns either the resource when options.sync is true or a Promise for the resource when options.sync is false.

resources: [
  (options) => new Promise((resolve, reject) => {
    fetchResource({onLoad: resolve, onError: reject});
  })
]

If you need to handle the resource in some way on load, you can pass an object with an onLoad member that will be called once all resources have been loaded. This should be used if loading a resource has side effects that should only be applied once all loading has completed.

resources: [
  {resource: (options) => { ... fetch ... }, onLoad: (res) => { ... apply side effect ... }}
]

Default: null

sync

Boolean

Retrieve i18n resource files synchronously.

Default: false

Properties added to wrapped component

className

String

Classes to apply to the wrapped component.

locale

String

The locale to use.

A string with a https://toolshttps://tools.ietf.org/html/rfc5646. The system locale will be used by default.

I18nContextDecorator Higher-Order Component

A higher-order component that provides access to the properties of the i18nContext via props. This is achieved by specifying the localeProp, rtlProp, and updateLocaleProp configuration options. Set the localeProp to a desired prop name to access the /developer-guide/i18n/docs/#using-i18ndecorator/developer-guide/i18n/docs/#using-i18ndecorator property, set the rtlProp to a desired prop name to access the /developer-guide/i18n/docs/#using-i18ndecorator/developer-guide/i18n/docs/#using-i18ndecorator property, and set the updateLocaleProp to a desired prop name to access the /developer-guide/i18n/docs/#using-i18ndecorator/developer-guide/i18n/docs/#using-i18ndecorator function, which is used to update the current locale.

Example:

const Component = ({rtl, _updateLocale}) => {
	const handleClick = () => _updateLocale('ar-SA');
	return (
		<button onClick={handleClick}>{rtl ? 'rtl' : 'ltr'}</button>
	);
};

const SomeComponent = I18nContextDecorator(
		{rtlProp: 'rtl', updateLocaleProp: '_updateLocale'},
		Component
)

Configuration

localeProp

String

The prop name for locale property of i18nContext.

Default: null

rtlProp

String

The prop name for rtl property of i18nContext.

Default: null

updateLocaleProp

String

The prop name for updateLocale property of i18nContext.

Default: null