J2 Innovations UI Utilities

A set of useful client side utilities useful for creating UI applications.

Installation

npm install @j2inn/util

Hooks

Localization

I18NProvider

Used for internationalizing an application.

First add an I18NProvider near the root of your React application...

// Uses English with the localization data being loaded from `/api/locales/en`.
<I18NProvider locale='en' path='/api/locales/{{locale}}'>
	<MyApp />
</I18NProvider>

For FIN5 there's no need to specify a path. It'll default to /fin5Lang/{{locale}}.

If no locale is specified, the browser's own locale will be used.

useI18n

This hook is used to get translated values in your application...

const MyApp = (): JSX.Element => {
	const {t} = useI18n()

	return <div>{t('hello', {param: 'Joe'})}</div>
}

For legacy applications, a more verbose approach can be used...

const MyApp = (): JSX.Element => {
	const i18n = useI18n()

	return <div>{i18n.get('hello', {param: 'Amanda'})}</div>
}

The parameters passed in are optional.

The loading property can also be used to detect whether a locale is currently being loaded from the server...

const MyApp = (): JSX.Element => {
	const {t, loading} = useI18n()

	if (loading) {
		return <Spinner />
	}

	return <div>{i18n.get('hello', {param: 'Amanda'})}</div>
}

Resources

An asynchronous way to create, read, update and delete resources can be used using the {@link useResource} and {@link useResources} hooks.

For more information, please see the example in {@link createResource}.