react-scoped-i18n 0.0.3 → 0.0.5

package/README.md

@@ -1,112 +1,114 @@
 # react-scoped-i18n 🌐
 
-`react-scoped-i18n 🌐` is a **fully type-safe** i18n solution for **React**.
+A React i18n library where **translations live next to the components that render them** - no keys, no JSON files, fully type-safe at compile time.
 
-It encourages writing translations right next to the components that use them.
+Works with **React** and **React Native** (_vanilla & Expo_).
 
 ---
 
-## Getting started:
+## The problem with key-based i18n
 
-### [Installation & Usage](/docs/usage.md)
+Every other i18n library makes you name things. You write a key in your component, then jump to a JSON file to write the actual string, then come back. Keys get stale. Typos go unnoticed until runtime. Your translation file becomes a graveyard of strings you're not sure are still used.
 
-### [API](/docs/api.md)
+`react-scoped-i18n` flips this: **translations are just code, written inline, where you need them.**
 
-###### Note: You can use this with both React and React Native (+ Expo) projects. 🚀
+```tsx
+const { t } = useI18n();
+
+const name = `Oto`;
+
+return <Heading>
+  {t({
+    en: `Welcome back, ${name}!`,
+    es: `¡Bienvenido de nuevo, ${name}!`,
+  })}
+</Heading>;
+```
 
+No keys. No files. `ctrl+f` on any rendered string takes you straight to the component.
 
 ---
 
-## Why `react-scoped-i18n 🌐`?
+## Type safety that actually catches bugs
 
-### Key features:
-- Very minimal setup with out-of-the-box number & date formatting
-- Fully type-safe:
-- - missing translations or unsupported languages are compile-time errors
-- - return types of `t()` are inferred from translation values
-- Utilize the widely supported [Internationalization API (Intl)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) for number, currency, date and time formatting
-- Usage is entirely in the runtime; no build-time transforms, no new syntax is required for string interpolation or dynamic translations generated at runtime, everything is plain JS/TS
+Forget to add a translation for a language you support? **TypeScript error.** Reference an unsupported language? **TypeScript error.** At compile time, not in production.
 
-### The focus is on dev experience:
-- Translations are colocated with the components that use them; looking up translations in the codebase always immediately leads to the relevant component code
-- No context switching between component code and translation files when developing UI
-- No tedious naming of translation keys, as they usually provide little value
-- Ditch restrictive translation file formats (JSON, YAML); use the full power of JS/TS
-- Runs within React's context system. No additional build steps, changes can be hot-reloaded, language switches reflected immediately
+```tsx
+return <Heading>
+  {t({
+    en: `Welcome back, ${name}!`,
+    // TS Error: Property 'es' is missing - your app supports Spanish
+  })}
+</Heading>;
+```
 
 ---
 
-## What does it look like?
+## Getting started
 
-##### Very Basic Example:
+- **[Installation & Usage](/docs/usage.md)** - 30 second setup
+- **[API Reference](/docs/api.md)** - full reference
 
-```tsx
-import { useI18n } from "@/i18n";
-import { Heading, Button } from "@/components";
+---
 
-export const WelcomeMessage = () => {
-    const { t, commons } = useI18n();
+## Key features
+
+- **Colocated translations** - live in the component, not a separate file
+- **Compile-time safety** - missing or unsupported languages are TypeScript errors
+- **No build-time transforms** - no Babel plugins, no magic, lives in React runtime (React Context) 
+- **No custom syntax** - plain JS template literals, no `{count, plural, ...}` to memorise
+- **Out-of-the-box formatting** - numbers, currencies, dates and times via the native [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+- **Hot-reload friendly** - language switches are reflected immediately
+- **Minimal setup** - takes 30 seconds
+
+---
 
+## Examples
+
+### Interpolation
+
+```tsx
+export const WelcomeMessage = () => {
+    const { t } = useI18n();
     const name = `John`;
 
     return (
-        <>
-            <Heading>
-                {t({
-                    // all fully type-safe for all configured languages
-                    en: `Welcome to the website, ${name}!`,
-                    es: `¡Bienvenido al sitio web, ${name}!`,
-                    sl: `Dobrodošli na spletno stran, ${name}!`,
-                })}
-            </Heading>
-            <Button>{
-                // "commons" object is used for commonly used, shared translations
-                t(commons.continue)
-            }</Button>
-        </>
+        <Heading>
+            {t({
+                en: `Welcome to the website, ${name}!`,
+                es: `¡Bienvenido al sitio web, ${name}!`,
+                sl: `Dobrodošli na spletno stran, ${name}!`,
+            })}
+        </Heading>
     );
 };
 ```
 
-<details>
-  <summary>
-Number Formatting Basic Example:
-  </summary>
+### Number & currency formatting
 
 ```tsx
-import { useI18n } from "@/i18n";
-import { Text } from "@/components";
-
 export const PriceTag = () => {
     const { t, format } = useI18n();
 
     const price = 19.99;
 
-    const currency = `USD`;
-
     return (
         <Text>
             {t({
-                en: `The price is ${format.currency(price, currency)}.`,
-                es: `El precio es ${format.currency(price, currency)}.`,
-                sl: `Cena je ${format.currency(price, currency)}.`,
+                en: `The price is ${format.currency(price, "USD")}.`,
+                es: `El precio es ${format.currency(price, "USD")}.`,
+                sl: `Cena je ${format.currency(price, "USD")}.`,
             })}
         </Text>
     );
 };
 ```
-</details>
 
+### Pluralization
 
-<details>
-  <summary>
-Pluralization Basic Example:
-  </summary>
+Full ICU category support (`one`, `two`, `many`, etc.), including a `negative` shorthand and the ability to target specific numbers.
 
 ```tsx
-import { useI18n } from "@/i18n";
-import { Text } from "@/components";
-
 export const Apples = () => {
     const { tPlural } = useI18n();
 
@@ -119,7 +121,7 @@ export const Apples = () => {
                     negative: `You are in apple debt...`,
                     one: `You have one apple.`,
                     many: `You have ${count} apples.`,
-                    42: `You have the perfect number of apples!`, // ‼️ you can target specific numbers
+                    42: `You have the perfect number of apples!`,
                 },
                 es: {
                     one: `Tienes una manzana.`,
@@ -127,21 +129,35 @@ export const Apples = () => {
                 },
                 sl: {
                     one: `Imaš eno jabolko.`,
-                    two: `Imaš dve jabolki.`, // ‼️ handling dual form in Slovenian that English and Spanish don't have
+                    two: `Imaš dve jabolki.`, // handling the Slovenian dual form
                     many: `Imaš ${count} jabolk.`,
-                }
+                },
             })}
         </Text>
-    )
+    );
 };
 ```
-</details>
 
-----
+### Shared / common translations
+
+```tsx
+const { t, commons } = useI18n();
+
+return <Button>{t(commons.continue)}</Button>;
+```
+
+---
+
+## Who this is for
+
+`react-scoped-i18n` is built for **small teams and indie developers** who:
 
-`react-scoped-i18n 🌐` shines most when devs are the ones adding translations into the app, and when the number of supported languages is small-to-medium sized.
+- Write and maintain their own translations (or work directly with translators in code)
+- Support a small-to-medium number of languages
+- Want TypeScript to enforce correctness, not just assist with autocomplete
+- Prefer reading code over managing JSON files
 
-You can find more in-depth examples in the [Installation & Usage](/docs/usage.md) and the API definitions in [API](/docs/api.md)
+If your workflow involves external translation platforms like Crowdin or Lokalise (or third party translators touching files directly), this approach is likely not for you.
 
 ---
 

package/dist/cjs/createI18nContext/api/createFormat.d.ts

@@ -1,7 +1,7 @@
 export declare const createFormat: <const Languages extends readonly string[]>({ currentLanguage, }: {
     currentLanguage: Languages[number];
 }) => {
-    number: (value: number, options?: Intl.NumberFormatOptions) => string;
+    number: (value: number, options?: Omit<Intl.NumberFormatOptions, `style`>) => string;
     date: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
     time: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
     currency: (value: number, currency: string, options?: Omit<Intl.NumberFormatOptions, `style` | `currency`>) => string;

package/dist/cjs/createI18nContext/api/createFormat.js

@@ -1,6 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFormat = void 0;
+const lru_cache_1 = __importDefault(require("lru-cache"));
+const const_1 = require("../const");
+const cache_1 = require("../util/cache");
 const createFormat = ({ currentLanguage, }) => {
     const defaultNumberFormatter = new Intl.NumberFormat(currentLanguage);
     const defaultDateFormatter = new Intl.DateTimeFormat(currentLanguage);
@@ -14,26 +20,68 @@ const createFormat = ({ currentLanguage, }) => {
     });
     return {
         number: (value, options) => {
-            if (options) {
-                return new Intl.NumberFormat(currentLanguage, options).format(value);
+            if (!options) {
+                return defaultNumberFormatter.format(value);
+            }
+            if (!caches.number.has(options)) {
+                (0, cache_1.potentiallyWarnInvalidCacheState)(value, caches.number, options);
+                caches.number.set(options, new Intl.NumberFormat(currentLanguage, options));
             }
-            return defaultNumberFormatter.format(value);
+            const cachedFormatter = caches.number.get(options);
+            if (cachedFormatter) {
+                return cachedFormatter.format(value);
+            }
+            return new Intl.NumberFormat(currentLanguage, options).format(value);
         },
         date: (value, options) => {
-            if (options) {
-                return new Intl.DateTimeFormat(currentLanguage, options).format(value);
+            if (!options) {
+                return defaultDateFormatter.format(value);
+            }
+            if (!caches.date.has(options)) {
+                (0, cache_1.potentiallyWarnInvalidCacheState)(value, caches.date, options);
+                caches.date.set(options, new Intl.DateTimeFormat(currentLanguage, options));
             }
-            return defaultDateFormatter.format(value);
+            const cachedFormatter = caches.date.get(options);
+            if (cachedFormatter) {
+                return cachedFormatter.format(value);
+            }
+            return new Intl.DateTimeFormat(currentLanguage, options).format(value);
         },
         time: (value, options) => {
-            if (options) {
-                return new Intl.DateTimeFormat(currentLanguage, {
-                    ...options,
-                }).format(value);
+            if (!options) {
+                return defaultTimeFormatter.format(value);
             }
-            return defaultTimeFormatter.format(value);
+            if (!caches.time.has(options)) {
+                (0, cache_1.potentiallyWarnInvalidCacheState)(value, caches.time, options);
+                caches.time.set(options, new Intl.DateTimeFormat(currentLanguage, options));
+            }
+            const cachedFormatter = caches.time.get(options);
+            if (cachedFormatter) {
+                return cachedFormatter.format(value);
+            }
+            return new Intl.DateTimeFormat(currentLanguage, {
+                ...options,
+            }).format(value);
         },
         currency: (value, currency, options) => {
+            if (options) {
+                const cacheKey = {
+                    ...options,
+                    currency,
+                };
+                if (!caches.currency.has(cacheKey)) {
+                    (0, cache_1.potentiallyWarnInvalidCacheState)(value, caches.currency, cacheKey);
+                    caches.currency.set(cacheKey, new Intl.NumberFormat(currentLanguage, {
+                        style: `currency`,
+                        currency,
+                        ...options,
+                    }));
+                }
+                const cachedFormatter = caches.currency.get(cacheKey);
+                if (cachedFormatter) {
+                    return cachedFormatter.format(value);
+                }
+            }
             return new Intl.NumberFormat(currentLanguage, {
                 style: `currency`,
                 currency,
@@ -41,14 +89,42 @@ const createFormat = ({ currentLanguage, }) => {
             }).format(value);
         },
         percentage: (value, options) => {
-            if (options) {
-                return new Intl.NumberFormat(currentLanguage, {
+            if (!options) {
+                return defaultPercentageFormatter.format(value);
+            }
+            if (!caches.percentage.has(options)) {
+                (0, cache_1.potentiallyWarnInvalidCacheState)(value, caches.number, options);
+                caches.percentage.set(options, new Intl.NumberFormat(currentLanguage, {
                     style: `percent`,
                     ...options,
-                }).format(value);
+                }));
             }
-            return defaultPercentageFormatter.format(value);
+            const cachedFormatter = caches.percentage.get(options);
+            if (cachedFormatter) {
+                return cachedFormatter.format(value);
+            }
+            return new Intl.NumberFormat(currentLanguage, {
+                style: `percent`,
+                ...options,
+            }).format(value);
         },
     };
 };
 exports.createFormat = createFormat;
+const caches = {
+    number: new lru_cache_1.default({
+        max: const_1.LRU_CACHE_MAX_SIZE,
+    }),
+    date: new lru_cache_1.default({
+        max: const_1.LRU_CACHE_MAX_SIZE,
+    }),
+    time: new lru_cache_1.default({
+        max: const_1.LRU_CACHE_MAX_SIZE,
+    }),
+    currency: new lru_cache_1.default({
+        max: const_1.LRU_CACHE_MAX_SIZE,
+    }),
+    percentage: new lru_cache_1.default({
+        max: const_1.LRU_CACHE_MAX_SIZE,
+    }),
+};

package/dist/cjs/createI18nContext/api/createFormat.test.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const createFormat_1 = require("./createFormat");
 describe(`createFormat`, () => {
+    const numberFormatOptions = {
+        minimumFractionDigits: 4,
+    };
     const format = (0, createFormat_1.createFormat)({
         currentLanguage: `en-US`,
     });
@@ -9,12 +12,11 @@ describe(`createFormat`, () => {
         const formattedNumber = format.number(1234567.89);
         expect(formattedNumber).toBe(`1,234,567.89`);
     });
-    it(`number formatter returns a formatted value with options`, () => {
-        const formattedNumber = format.number(0.1234, {
-            style: `percent`,
-            minimumFractionDigits: 2,
-        });
-        expect(formattedNumber).toBe(`12.34%`);
+    it(`number formatter returns a formatted value with options (with caching enabled)`, () => {
+        const formattedNumber1 = format.number(1234567.89, numberFormatOptions);
+        const formattedNumber2 = format.number(1234567.89, numberFormatOptions);
+        expect(formattedNumber1).toBe(`1,234,567.8900`);
+        expect(formattedNumber2).toBe(`1,234,567.8900`);
     });
     it(`date formatter returns a formatted value`, () => {
         const date = new Date(`2024-01-01T12:00:00Z`);
@@ -55,12 +57,10 @@ describe(`createFormat`, () => {
         expect(formattedCurrency).toBe(`€1,234.6`);
     });
     it(`percentage formatter returns a formatted value`, () => {
-        const formattedPercentage = format.percentage(0.1234);
-        expect(formattedPercentage).toBe(`12%`);
-    });
-    it(`percentage formatter returns a formatted value `, () => {
-        const formattedPercentage = format.percentage(0.1234);
-        expect(formattedPercentage).toBe(`12%`);
+        const formattedPercentage1 = format.percentage(0.1234);
+        const formattedPercentage2 = format.percentage(0.1267);
+        expect(formattedPercentage1).toBe(`12%`);
+        expect(formattedPercentage2).toBe(`13%`);
     });
     it(`percentage formatter returns a formatted value with options`, () => {
         const formattedPercentage = format.percentage(0.1234, {
@@ -68,4 +68,33 @@ describe(`createFormat`, () => {
         });
         expect(formattedPercentage).toBe(`12.34%`);
     });
+    it(`Error: Number options are not cached`, () => {
+        const warnSpy = jest.spyOn(console, `warn`);
+        const formattedNumber1 = format.number(1234567.89, {
+            minimumFractionDigits: 5,
+        });
+        const formattedNumber2 = format.number(1234567.89, {
+            minimumFractionDigits: 5,
+        });
+        expect(formattedNumber1).toBe(`1,234,567.89000`);
+        expect(formattedNumber2).toBe(`1,234,567.89000`);
+        expect(warnSpy).toHaveBeenCalledWith(`[i18n] ⚠️ Formatting 1234567.89 with options {"minimumFractionDigits":5} is not cached, but it should be. This is because you are recreating the options object on every render. To fix this, memoize the options object or define it outside of the component.`);
+    });
+    it(`Error: Date options are not cached`, () => {
+        const warnSpy = jest.spyOn(console, `warn`);
+        const date = new Date(`2026-02-03T12:00:00Z`);
+        const formattedDate1 = format.date(date, {
+            year: `numeric`,
+            month: `long`,
+            day: `numeric`,
+        });
+        const formattedDate2 = format.date(date, {
+            year: `numeric`,
+            month: `long`,
+            day: `numeric`,
+        });
+        expect(formattedDate1).toBe(`February 3, 2026`);
+        expect(formattedDate2).toBe(`February 3, 2026`);
+        expect(warnSpy).toHaveBeenCalledWith(`[i18n] ⚠️ Formatting Tue Feb 03 2026 13:00:00 GMT+0100 (Central European Standard Time) with options {"year":"numeric","month":"long","day":"numeric"} is not cached, but it should be. This is because you are recreating the options object on every render. To fix this, memoize the options object or define it outside of the component.`);
+    });
 });

package/dist/cjs/createI18nContext/api/createUseI18n.d.ts

@@ -11,7 +11,7 @@ export declare const createUseI18n: <const Languages extends readonly string[],
     setCurrentLanguage: import("react").Dispatch<import("react").SetStateAction<Languages[number]>>;
     currentLanguage: Languages[number];
     format: {
-        number: (value: number, options?: Intl.NumberFormatOptions) => string;
+        number: (value: number, options?: Omit<Intl.NumberFormatOptions, `style`>) => string;
         date: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
         time: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
         currency: (value: number, currency: string, options?: Omit<Intl.NumberFormatOptions, `style` | `currency`>) => string;

package/dist/cjs/createI18nContext/api/createUseI18n.js

@@ -30,7 +30,9 @@ const createUseI18n = ({ I18nContext, languages, fallbackLanguage, commons, }) =
             });
         }, [currentLanguage]);
         const format = (0, react_1.useMemo)(() => {
-            return (0, createFormat_1.createFormat)({ currentLanguage });
+            return (0, createFormat_1.createFormat)({
+                currentLanguage,
+            });
         }, [currentLanguage]);
         const _commons = (0, react_1.useMemo)(() => {
             return (0, createCommons_1.createCommons)({

package/dist/cjs/createI18nContext/api/createUseI18n.test.js

@@ -16,9 +16,11 @@ describe(`createUseI18n`, () => {
             .mockImplementation(() => { });
         try {
             useI18n();
+            // eslint-disable-next-line unused-imports/no-unused-vars
         }
         catch (e) {
-            expect(consoleErrorSpy).toHaveBeenCalled(); // eslint-disable-line unused-imports/no-unused-vars
+            // eslint-disable-line unused-imports/no-unused-vars
+            expect(consoleErrorSpy).toHaveBeenCalled();
         }
         consoleErrorSpy.mockRestore();
     });

package/dist/cjs/createI18nContext/api/useCreateFormat.d.ts

@@ -0,0 +1,9 @@
+export declare const useCreateFormat: <const Languages extends readonly string[]>({ currentLanguage, }: {
+    currentLanguage: Languages[number];
+}) => {
+    number: (value: number, options?: Intl.NumberFormatOptions) => string;
+    date: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
+    time: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
+    currency: (value: number, currency: string, options?: Omit<Intl.NumberFormatOptions, `style` | `currency`>) => string;
+    percentage: (value: number, options?: Omit<Intl.NumberFormatOptions, `style`>) => string;
+};

package/dist/cjs/createI18nContext/api/useCreateFormat.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateFormat = void 0;
+const react_1 = require("react");
+const useCreateFormat = ({ currentLanguage, }) => {
+    const defaultNumberFormatter = new Intl.NumberFormat(currentLanguage);
+    const defaultDateFormatter = new Intl.DateTimeFormat(currentLanguage);
+    const defaultTimeFormatter = new Intl.DateTimeFormat(currentLanguage, {
+        hour: `numeric`,
+        minute: `numeric`,
+        second: `numeric`,
+    });
+    const defaultPercentageFormatter = new Intl.NumberFormat(currentLanguage, {
+        style: `percent`,
+    });
+    const defaultCurrencyFormatter = (0, react_1.useMemo)(() => {
+        return new Intl.NumberFormat(currentLanguage, {
+            style: `currency`,
+            currency: `USD`,
+        });
+    }, [currentLanguage]);
+    console.log(defaultCurrencyFormatter.resolvedOptions().currency);
+    return {
+        number: (value, options) => {
+            if (options) {
+                return new Intl.NumberFormat(currentLanguage, options).format(value);
+            }
+            return defaultNumberFormatter.format(value);
+        },
+        date: (value, options) => {
+            if (options) {
+                return new Intl.DateTimeFormat(currentLanguage, options).format(value);
+            }
+            return defaultDateFormatter.format(value);
+        },
+        time: (value, options) => {
+            if (options) {
+                return new Intl.DateTimeFormat(currentLanguage, {
+                    ...options,
+                }).format(value);
+            }
+            return defaultTimeFormatter.format(value);
+        },
+        currency: (value, currency, options) => {
+            return new Intl.NumberFormat(currentLanguage, {
+                style: `currency`,
+                currency,
+                ...options,
+            }).format(value);
+        },
+        percentage: (value, options) => {
+            if (options) {
+                return new Intl.NumberFormat(currentLanguage, {
+                    style: `percent`,
+                    ...options,
+                }).format(value);
+            }
+            return defaultPercentageFormatter.format(value);
+        },
+    };
+};
+exports.useCreateFormat = useCreateFormat;

package/dist/cjs/createI18nContext/api/useCreateFormat.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/createI18nContext/api/useCreateFormat.test.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const useCreateFormat_1 = require("./useCreateFormat");
+describe(`createFormat`, () => {
+    const format = (0, useCreateFormat_1.useCreateFormat)({
+        currentLanguage: `en-US`,
+    });
+    it(`number formatter returns a formatted value`, () => {
+        const formattedNumber = format.number(1234567.89);
+        expect(formattedNumber).toBe(`1,234,567.89`);
+    });
+    it(`number formatter returns a formatted value with options`, () => {
+        const formattedNumber = format.number(0.1234, {
+            style: `percent`,
+            minimumFractionDigits: 2,
+        });
+        expect(formattedNumber).toBe(`12.34%`);
+    });
+    it(`date formatter returns a formatted value`, () => {
+        const date = new Date(`2024-01-01T12:00:00Z`);
+        const formattedDate = format.date(date);
+        expect(formattedDate).toBe(`1/1/2024`);
+    });
+    it(`date formatter returns a formatted value with options`, () => {
+        const date = new Date(`1999-01-01T12:00:00Z`);
+        const formattedDate = format.date(date, {
+            year: `numeric`,
+            month: `long`,
+            day: `numeric`,
+        });
+        expect(formattedDate).toBe(`January 1, 1999`);
+    });
+    it(`time formatter returns a formatted value`, () => {
+        const date = new Date(`1912-06-23T02:15:00`);
+        const formattedTime = format.time(date);
+        expect(formattedTime).toBe(`2:15:00 AM`);
+    });
+    it(`time formatter returns a formatted value with options`, () => {
+        const date = new Date(`2000-12-31T23:45:30`);
+        const formattedTime = format.time(date, {
+            hour12: false,
+            hour: `2-digit`,
+            minute: `2-digit`,
+        });
+        expect(formattedTime).toBe(`23:45`);
+    });
+    it(`currency formatter returns a formatted value`, () => {
+        const formattedCurrency = format.currency(1234.567, `USD`);
+        expect(formattedCurrency).toBe(`$1,234.57`);
+    });
+    it(`currency formatter returns a formatted value with options`, () => {
+        const formattedCurrency = format.currency(1234.567, `EUR`, {
+            maximumFractionDigits: 1,
+        });
+        expect(formattedCurrency).toBe(`€1,234.6`);
+    });
+    it(`percentage formatter returns a formatted value`, () => {
+        const formattedPercentage1 = format.percentage(0.1234);
+        const formattedPercentage2 = format.percentage(0.1267);
+        expect(formattedPercentage1).toBe(`12%`);
+        expect(formattedPercentage2).toBe(`13%`);
+    });
+    it(`percentage formatter returns a formatted value with options`, () => {
+        const formattedPercentage = format.percentage(0.1234, {
+            minimumFractionDigits: 2,
+        });
+        expect(formattedPercentage).toBe(`12.34%`);
+    });
+});

package/dist/cjs/createI18nContext/const/index.d.ts

@@ -1 +1,2 @@
 export declare const MISSING_TRANSLATION = "[MISSING TRANSLATION]";
+export declare const LRU_CACHE_MAX_SIZE = 500;

package/dist/cjs/createI18nContext/const/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MISSING_TRANSLATION = void 0;
+exports.LRU_CACHE_MAX_SIZE = exports.MISSING_TRANSLATION = void 0;
 exports.MISSING_TRANSLATION = `[MISSING TRANSLATION]`;
+exports.LRU_CACHE_MAX_SIZE = 500;

package/dist/cjs/createI18nContext/index.d.ts

@@ -17,7 +17,7 @@ export declare function createI18nContext<Languages extends readonly string[], C
         setCurrentLanguage: import("react").Dispatch<import("react").SetStateAction<Languages[number]>>;
         currentLanguage: Languages[number];
         format: {
-            number: (value: number, options?: Intl.NumberFormatOptions) => string;
+            number: (value: number, options?: Omit<Intl.NumberFormatOptions, `style`>) => string;
             date: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
             time: (value: Date | number, options?: Intl.DateTimeFormatOptions) => string;
             currency: (value: number, currency: string, options?: Omit<Intl.NumberFormatOptions, `style` | `currency`>) => string;