@uxf/localize

Installation

yarn add @uxf/localize

npm install @uxf/localize

Initialize and configure package

Configure package

// localize.ts
import { createLocalize } from "@uxf/localize";
import cs from "@uxf/localize/locale/cs"; // LocalizeConfig
import en from "@uxf/localize/locale/en"; // LocalizeConfig

export const { 
    LocalizeProvider,
    formatDateTime,
    formatTime,
    formatMoney,
    formatNumber,
    formatPercentage,
    useFormatDateTime,
    useFormatTime,
    useFormatMoney,
    useFormatNumber,
    useFormatPercentage,
    FormatDateTime,
    FormatTime,
    FormatNumber,
    FormatMoney,
    FormatPercentage,
} = createLocale({ cs, en });

Localize config examples

import {DateTimes, Times, LocalizeConfig} from "@uxf/localize";

const en: LocalizeConfig<DateTimes, Times> = {
    number: {
        thousandsSeparator: ",",
        decimalSeparator: ".",
    },
    currency: {
        thousandsSeparator: ",",
        decimalSeparator: ".",
        specialCases: {
            USD: {
                pattern: "#\xa0$",
                negativePattern: "-$\xa0$",
            },
        },
    },
    dateTime: {
        timeShort: "H:mm A",
        timeFull: "H:mm:ss A",
        dateShort: "M/D/YY",
        dateMedium: "M/D/YYYY",
        dateLong: "MMMM D. YYYY",
        dateShortNoYear: "M/D",
        dateLongNoYear: "MMMM D.",
        dateTimeShort: "M/D/YY H:mm A",
        dateTimeMedium: "M/D/YYYY H:mm A",
        dateTimeLong: "MMMM D. YYYY H:mm:ss A",
    },
    time: {
        short: "h:mm A",
        long: "h:mm:ss A",
    },
};

const cs: LocalizeConfig<DateTimes, Times> = {
    number: {
        thousandsSeparator: "\xa0",
        decimalSeparator: ",",
    },
    currency: {
        thousandsSeparator: "\xa0",
        decimalSeparator: ",",
        specialCases: {
            CZK: {
                pattern: "#\xa0Kč",
                negativePattern: "-#\xa0Kč",
            },
        },
    },
    dateTime: {
        timeShort: "H:mm",
        timeFull: "H:mm:ss",
        dateShort: "D. M. YY",
        dateMedium: "D. M. YYYY",
        dateLong: "D. MMMM YYYY",
        dateShortNoYear: "D. M.",
        dateLongNoYear: "D. MMMM",
        dateTimeShort: "D. M. YY, H:mm",
        dateTimeMedium: "D. M. YYYY, H:mm",
        dateTimeLong: "D. MMMM YYYY, H:mm:ss",
    },
    time: {
        short: "H:mm",
        long: "H:mm:ss",
    }
};

Add LocalizeProvider to _app.tsx

// _app.tsx

<LocalizeProvider locale="cs">{props.children}</LocalizeProvider>

Format number

const { useFormatNumber, FormatNumber } from "./localize";

const formatNumber = useFormatNumber();

formatNumber(1000.23); // 1 000
formatNumber(1000.23, { precision: 2 }); // 1 000,23

<FormatNumber value={1000.23}/>

Format datetime

const { useFormatDateTime, FormatDateTime } from "./localize";

const formatDateTime = useFormatDateTime();

formatDateTime(new Date('2000-01-01'), "dateShort"); // 1. 1. 20
formatDateTime(new Date('2000-01-01'), "dateTimeMedium"); // 1. 1. 2000 00:00
formatDateTime(new Date('2000-01-01'), "timeFull"); // 00:00:00

<FormatDateTime value={new Date('2000-01-01')} format="dateShort"/>

Format time

const { useFormatTime, FormatTime } from "./localize";

const formatTime = useFormatTime();

formatTime("07:58:35", "short"); // 7:58
formatTime("07:58:35", "short"); // 7:58:35

<FormatTime value="07:58:35" format="short"/>

Format money

const { useFormatMoney, FormatMoney } from "./localize";

const formatMoney = useFormatMoney();

formatMoney({amount: 1000, currency: "CZK"}); // 1 000 Kč
formatMoney({amount: 1000, currency: "USD"}); // 1 000 $
formatMoney({amount: 1000.23, currency: "CZK"}, { precision: 1 }); // 1 000,2 Kč
formatMoney({amount: 1000.23, currency: "CZK"}, { preferIsoCode: true }); // 1 000,23 CZK
formatMoney({amount: 1000.23, currency: "CZK"}, { hideSymbol: true }); // 1 000,23

<FormatMoney money={{amount: 1000, currency: "CZK"}}/>

Format percentage

const { useFormatPercentage, FormatPercentage } from "./localize";

const formatPercentage = useFormatPercentage();

formatPercentage(0.782); // 78,2 %
formatPercentage(0.782, "nearest"); // 78,2 %
formatPercentage(0.782, "up"); // 78,2 %
formatPercentage(0.782, "down"); // 78,2 %

<FormatPercentage value={0.782} roundingType="up" />

Format another locale

const { formatNumber, formatDateTime, formatMoney, formatPercentage } from "./localize";

formatNumber("cs", 1000.23); // 1 000
formatDateTime("cs", new Date('2000-01-01'), "dateMedium") // 1. 1. 2000
formatMoney("cs", 1000, "CZK") // 1 000 Kč
formatPercentage("cs", 0.782) // 78,2 %

FormatDateTime example:

By date string 2024-10-24:	24. October 2024, 0:00:00
By datetime string 2024-10-24T12:46:26+02:00:	24. October 2024, 12:46:26
By new Date() new Date("2024-10-24T12:46:26+02:00"):	24. October 2024, 12:46:26
By datetime string, timezone: Pacific/Auckland 2024-10-24T12:46:26+02:00:	24. October 2024, 23:46:26