i18n

ℹ️

Information about this package can be found here.

This part of the library abstracts overall i18n setup, provides date & time and language (translations) support in a simple manner.

Installation

This library takes with it quite a punch of dependencies.

npm

npm i @leight/i18n-client

Translations

Translations are based on i18next (opens in a new tab) and next-i18next (opens in a new tab) with some little helpers to keep things consistent.

Date & Time

Usage

State backend is powered by @leight/zustand and @leight/context-client; it comes with some pieces: (store) provider and consumer (hooks).

@leight/i18n-client abstracts date/time library Luxon (opens in a new tab).

Provider

Provider should be somewhere high in the app/component tree; PageShell in @leight/mantine uses this provider by default.

MyComponent.tsx

import {DateTimeProvider} from '@leight/i18n-client';
 
export const MyComponent = () => {
	return <DateTimeProvider>
        rest of your components now use `useDateTimeState`
    </DateTimeProvider>
}

Consumer - Store

MyComponent.tsx

import {useDateTimeState} from "@leight/i18n-client";
 
export const MyComponent = () => {
	/**
     * See store/IDE completion what methods are available; basically this just abstract usage of a backend
     * date/time library used.
     */
    const {toLocalDate} = useDateTimeState(({toLocalDate}) => ({toLocalDate}));
	return <>{toLocalDate("iso-formatted-date")}</>;
};

Consumer - Components

MyComponent2.tsx

import {Date, DateTime} from "@leight/i18n-client";
 
export const MyComponent2 = () => {
	/**
     * There are Date and DateTime components which internally use DateTime context; nothing special is inside,
     * no spans and so on, so you can do whatever you want with them.
     */
	return <>
        <Date input={"1995-04-14"}/>
        <DateTime input={"1995-04-14T07:32"}/>
    </>;
};

Prisma Zustand