@uxf/localize
v11.47.0
Published
[![npm](https://img.shields.io/npm/v/@uxf/localize)](https://www.npmjs.com/package/@uxf/localize) [![size](https://img.shields.io/bundlephobia/min/@uxf/localize)](https://www.npmjs.com/package/@uxf/localize) [![quality](https://img.shields.io/npms-io/qual
Downloads
310
Readme
@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,
formatMoney,
formatNumber,
formatPercentage,
useFormatDateTime,
useFormatMoney,
useFormatNumber,
useFormatPercentage,
FormatDateTime,
FormatNumber,
FormatMoney,
FormatPercentage,
} = createLocale({ cs, en });
Localize config examples
import {DateTimes, LocalizeConfig} from "@uxf/localize";
const en: LocalizeConfig<DateTimes> = {
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",
},
};
const cs: LocalizeConfig<DateTimes> = {
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",
},
};
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 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 %