@uxf/localize 10.0.0-beta.43 → 10.0.0-beta.65

package/README.md

@@ -34,6 +34,10 @@ export const {
     useFormatMoney,
     useFormatNumber,
     useFormatPercentage,
+    FormatDateTime,
+    FormatNumber,
+    FormatMoney,
+    FormatPercentage,
 } = createLocale({ cs, en });
 ```
 
@@ -42,7 +46,7 @@ export const {
 ```ts
 import {DateTimes, LocalizeConfig} from "@uxf/localize";
 
-const en: LocalizeConfig = {
+const en: LocalizeConfig<DateTimes> = {
     number: {
         thousandsSeparator: ",",
         decimalSeparator: ".",
@@ -103,49 +107,57 @@ const cs: LocalizeConfig<DateTimes> = {
 
 ## Format number
 ```tsx
-const { useFormatNumber } from "./localize";
+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
 ```tsx
-const { useFormatDateTime } from "./localize";
+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(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
 ```tsx
-const { useFormatMoney } from "./localize";
+const { useFormatMoney, FormatMoney } from "./localize";
 
 const formatMoney = useFormatMoney();
 
-formatMoney(1000, "CZK") // 1 000 Kč
-formatMoney(1000, "USD") // 1 000 $
-formatMoney(1000.23, "CZK", { precision: 1 }) // 1 000,2 Kč
-formatMoney(1000.23, "CZK", { preferIsoCode: true }) // 1 000,23 CZK
-formatMoney(1000.23, "CZK", { hideSymbol: true }) // 1 000,23
+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
 
 ```tsx
-const { useFormatPercentage } from "./localize";
+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(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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/localize",
-  "version": "10.0.0-beta.43",
+  "version": "10.0.0-beta.65",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/format-datetime.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context/context");
 const format_datetime_1 = require("../format-datetime/format-datetime");
 function createFormatDatetimeComponent(localizeConfigs) {
-    const Component = (value, format) => {
+    const Component = (props) => {
         const locale = (0, context_1._useLocalizeContext)();
-        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_datetime_1.createFormatDatetime)(localizeConfigs)(locale, value, format));
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_datetime_1.createFormatDatetime)(localizeConfigs)(locale, props.value, props.format));
     };
     return Component;
 }

package/src/components/format-money.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context/context");
 const format_money_1 = require("../format-money/format-money");
 function createFormatMoneyComponent(localizeConfigs) {
-    const Component = (money, options) => {
+    const Component = (props) => {
         const locale = (0, context_1._useLocalizeContext)();
-        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_money_1.createFormatMoney)(localizeConfigs)(locale, money, options));
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_money_1.createFormatMoney)(localizeConfigs)(locale, props.money, props.options));
     };
     return Component;
 }

package/src/components/format-number.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context/context");
 const format_number_1 = require("../format-number/format-number");
 function createFormatNumberComponent(localizeConfigs) {
-    const Component = (value, options) => {
+    const Component = (props) => {
         const locale = (0, context_1._useLocalizeContext)();
-        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_number_1.createFormatNumber)(localizeConfigs)(locale, value, options));
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_number_1.createFormatNumber)(localizeConfigs)(locale, props.value, props.options));
     };
     return Component;
 }

package/src/components/format-percentage.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context/context");
 const format_percentage_1 = require("../format-percentage/format-percentage");
 function createFormatPercentageComponent(localizeConfigs) {
-    const Component = (value, roundingType, options) => {
+    const Component = (props) => {
         const locale = (0, context_1._useLocalizeContext)();
-        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_percentage_1.createFormatPercentage)(localizeConfigs)(locale, value, roundingType, options));
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_percentage_1.createFormatPercentage)(localizeConfigs)(locale, props.value, props.roundingType, props.options));
     };
     return Component;
 }

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import { CURRENCIES } from "./utils/data";
-import { Provider, ReactElement } from "react";
+import { FC, Provider } from "react";
 export type DateTimes = "timeShort" | "timeFull" | "dateShort" | "dateMedium" | "dateLong" | "dateShortNoYear" | "dateLongNoYear" | "dateTimeShort" | "dateTimeMedium" | "dateTimeLong";
 export type LocalizeConfig<DT extends DateTimes> = {
     number: {
@@ -23,16 +23,29 @@ export type Money = {
 };
 export type FormatNumberFunction<Locales extends string> = (locale: Locales, value: number, options?: FormatNumberOptions) => string;
 export type UseFormatNumberFunction = () => (value: number, options?: FormatNumberOptions) => string;
-export type FormatNumberComponent = (value: number, options?: FormatNumberOptions) => ReactElement;
+export type FormatNumberComponent = FC<{
+    value: number;
+    options?: FormatNumberOptions;
+}>;
 export type FormatMoneyFunction<Locales extends string> = (locale: Locales, money: Money, options?: FormatMoneyOptions) => string;
 export type UseFormatMoneyFunction = () => (money: Money, options?: FormatMoneyOptions) => string;
-export type FormatMoneyComponent = (money: Money, options?: FormatMoneyOptions) => ReactElement;
+export type FormatMoneyComponent = FC<{
+    money: Money;
+    options?: FormatMoneyOptions;
+}>;
 export type FormatPercentageFunction<Locales extends string> = (locale: Locales, value: number, roundingType?: RoundingType | null, options?: FormatPercentageOptions) => string;
 export type UseFormatPercentageFunction = () => (value: number, roundingType?: RoundingType | null, options?: FormatPercentageOptions) => string;
-export type FormatPercentageComponent = (value: number, roundingType?: RoundingType | null, options?: FormatPercentageOptions) => ReactElement;
+export type FormatPercentageComponent = FC<{
+    value: number;
+    roundingType?: RoundingType | null;
+    options?: FormatPercentageOptions;
+}>;
 export type FormatDatetimeFunction<DT extends DateTimes, Locales extends string> = (locale: Locales, value: Date, format: DT) => string;
 export type UseFormatDatetimeFunction<DT extends DateTimes> = () => (value: Date, format: DT) => string;
-export type FormatDatetimeComponent<DT extends DateTimes> = (value: Date, format: DT) => ReactElement;
+export type FormatDatetimeComponent<DT extends DateTimes> = FC<{
+    value: Date;
+    format: DT;
+}>;
 export type CreateLocalizeReturn<DT extends DateTimes, Locales extends string> = {
     LocalizeProvider: LocalizeProviderType;
     useLocaleConfig: UseLocaleConfigType<DT>;