This documentation is still work in progress, so be please patient.

# 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