@intlayer/docs 9.1.3 → 9.3.0

package/docs/hi/formatters.md

@@ -42,7 +42,9 @@ author: aymericzip
 
 # Intlayer Formatters
 
-# Intlayer फॉर्मेटर्स
+## विषय सूची
+
+<TOC/>
 
 ## अवलोकन
 
@@ -78,49 +80,61 @@ import {
 
 यदि आप React का उपयोग कर रहे हैं, तो हुक्स भी उपलब्ध हैं; देखें `react-intlayer/format`।
 
-## कैश्ड Intl
-
-निर्यातित `Intl` वैश्विक `Intl` के चारों ओर एक पतला, कैश्ड रैपर है। यह `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, और `PluralRules` के उदाहरणों को मेमोइज़ करता है, जो एक ही फॉर्मेटर को बार-बार पुनर्निर्माण करने से बचाता है।
+### उपलब्ध Hooks
 
-चूंकि फॉर्मेटर निर्माण अपेक्षाकृत महंगा होता है, यह कैशिंग प्रदर्शन में सुधार करती है बिना व्यवहार को बदले। रैपर मूल `Intl` के समान API प्रदान करता है, इसलिए उपयोग समान होता है।
+सभी hooks स्वचालित रूप से `IntlayerProvider` या `IntlayerServerProvider` से locale का उपयोग करते हैं।
 
-- कैशिंग प्रति प्रक्रिया होती है और कॉलर्स के लिए पारदर्शी होती है।
+| Hook                | विवरण                                           | उदाहरण आउटपुट                 |
+| ------------------- | ----------------------------------------------- | ----------------------------- |
+| `useNumber()`       | समूहन के साथ संख्याओं को प्रारूपित करें         | `"123,456.789"`               |
+| `useCurrency()`     | मुद्रा मानों को प्रारूपित करें                  | `"€1,234.50"`                 |
+| `usePercentage()`   | प्रतिशत को प्रारूपित करें                       | `"25%"`                       |
+| `useDate()`         | तारीखें और समय प्रारूपित करें                   | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | सापेक्ष समय प्रारूपित करें                      | `"in 3 days"`                 |
+| `useUnit()`         | इकाइयों के साथ मानों को प्रारूपित करें          | `"5 kilometers"`              |
+| `useCompact()`      | कॉम्पैक्ट नोटेशन में संख्याओं को प्रारूपित करें | `"1.2K"`                      |
+| `useList()`         | सरणियों को सूचियों के रूप में प्रारूपित करें    | `"apple, banana, and orange"` |
+| `useIntl()`         | locale-bound `Intl` ऑब्जेक्ट प्राप्त करें       | Full `Intl` API access        |
 
-> यदि `Intl.DisplayNames` पर्यावरण में उपलब्ध नहीं है, तो एकल डेवलपर-केवल चेतावनी प्रदर्शित की जाती है (पॉलीफिल पर विचार करें)।
+### संपूर्ण उदाहरण
 
-उदाहरण:
-
-```ts
-import { Intl } from "intlayer";
-
-// संख्या स्वरूपण
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// भाषाओं, क्षेत्रों आदि के लिए डिस्प्ले नाम
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
 
-// क्रमबद्ध करने के लिए कोलेशन
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-// स्ट्रिंग की तुलना के लिए collator का उपयोग करें
-collator.compare("é", "e"); // 0 (समान)
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
 
-// बहुवचन नियम
-const pluralRules = new Intl.PluralRules("fr");
-// संख्या 1 के लिए बहुवचन रूप चुनें
-pluralRules.select(1); // "one"
-// संख्या 2 के लिए बहुवचन रूप चुनें
-pluralRules.select(2); // "other"
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
+      <p>{unit(5, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
 ```
 
-## अतिरिक्त Intl उपयोगिताएँ
-
-फॉर्मेटर हेल्पर्स के अलावा, आप अन्य Intl फीचर्स के लिए कैश किए गए Intl रैपर का सीधे उपयोग भी कर सकते हैं:
-
 ### `Intl.DisplayNames`
 
 भाषाओं, क्षेत्रों, मुद्राओं, और स्क्रिप्ट्स के स्थानीयकृत नामों के लिए:
@@ -245,6 +259,189 @@ import {
 } from "intlayer";
 ```
 
+### Formatter Functions
+
+#### `number(value, options?)`
+
+एक numeric मान को locale-aware grouping और decimals का उपयोग करके फॉर्मेट करता है।
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+number(123456.789); // "123,456.789" (in en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+#### `percentage(value, options?)`
+
+एक संख्या को प्रतिशत स्ट्रिंग के रूप में प्रारूपित करता है। 1 से अधिक मान सामान्यीकृत होते हैं (उदाहरण के लिए, `25` → `25%`, `0.25` → `25%`)।
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+```
+
+#### `currency(value, options?)`
+
+एक मान को स्थानीयकृत मुद्रा के रूप में प्रारूपित करता है। डिफ़ॉल्ट रूप से `USD`।
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Common: `currency`, `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+```ts
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+#### `date(date, optionsOrPreset?)`
+
+एक date/time value को format करता है।
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` या preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+```ts
+date(new Date(), "short"); // e.g., "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+#### `relativeTime(from, to?, options?)`
+
+दो तत्काल के बीच सापेक्ष समय को फॉर्मेट करता है।
+
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (डिफ़ॉल्ट `new Date()`)
+- **options**: `{ locale?, unit?, numeric?, style? }`
+
+```ts
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "3 दिन में"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 घंटे पहले"
+```
+
+#### `units(value, options?)`
+
+एक संख्यात्मक मान को एक इकाई के साथ प्रारूपित करता है।
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - सामान्य: `unit` (उदाहरण के लिए, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+
+```ts
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"
+```
+
+#### `compact(value, options?)`
+
+कॉम्पैक्ट नोटेशन का उपयोग करके एक संख्या को फ़ॉर्मेट करता है।
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+#### `list(values, options?)`
+
+एक array को स्थानीयकृत list string में प्रारूपित करता है।
+
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Common: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+
+```ts
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+```
+
+## Cached Intl
+
+`intlayer` से निर्यात किया गया `Intl` ग्लोबल `Intl` के चारों ओर एक cached wrapper है। यह formatter instances (`NumberFormat`, `DateTimeFormat`, आदि) को memoize करता है ताकि उन्हें बार-बार construct करने से बचा जा सके, जिससे performance में सुधार होता है।
+
+```ts
+import { Intl } from "intlayer";
+
+// संख्या फॉर्मेटिंग
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// भाषाओं, क्षेत्रों आदि के लिए प्रदर्शन नाम
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// सॉर्टिंग के लिए Collation
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (equal)
+
+// बहुवचन नियम
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+### अतिरिक्त Intl Features
+
+#### `Intl.DisplayNames`
+
+भाषाओं, क्षेत्रों, मुद्राओं और लिपियों के स्थानीयकृत नामों के लिए:
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+#### `Intl.Collator`
+
+लोकेल-जागरूक स्ट्रिंग तुलना और सॉर्टिंग के लिए:
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+#### `Intl.PluralRules`
+
+विभिन्न locales में plural forms निर्धारित करने के लिए:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
 ## स्थानीय उपयोगिताएँ
 
 ### `getLocaleName(displayLocale, targetLocale?)`
@@ -383,21 +580,6 @@ const content = getTranslation(
 - **locale**: लक्षित लोकल (डिफ़ॉल्ट रूप से कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकल)
 - **fallback**: क्या डिफ़ॉल्ट लोकल पर वापस जाना है (डिफ़ॉल्ट रूप से true)
 
-### `getIntlayer(dictionaryKey, locale?, plugins?)`
-
-डिक्शनरी की कुंजी से सामग्री प्राप्त करता है और रूपांतरित करता है:
-
-```ts
-import { getIntlayer } from "intlayer";
-
-const content = getIntlayer("common", "fr");
-const nestedContent = getIntlayer("common", "fr", customPlugins);
-```
-
-- **dictionaryKey**: पुनः प्राप्त करने के लिए शब्दकोश की कुंजी
-- **locale**: वैकल्पिक लोकल (डिफ़ॉल्ट रूप से कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकल)
-- **plugins**: कस्टम रूपांतरण प्लगइन्स की वैकल्पिक सूची
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 दूरस्थ शब्दकोश से असिंक्रोनस रूप से सामग्री पुनः प्राप्त करता है:
@@ -412,291 +594,8 @@ const content = await getIntlayerAsync("common", "fr");
 - **locale**: वैकल्पिक लोकल (डिफ़ॉल्ट रूप से कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकल)
 - **plugins**: कस्टम रूपांतरण प्लगइन्स की वैकल्पिक सूची
 
-## फॉर्मेटर्स
-
-नीचे सभी हेल्पर्स `intlayer` से निर्यात किए गए हैं।
-
-### `number(value, options?)`
-
-संख्या मान को लोकल-संवेदनशील समूहबद्धता और दशमलव के साथ स्वरूपित करता है।
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-उदाहरण:
-
-```ts
-import { number } from "intlayer";
-
-number(123456.789); // "123,456.789" (en-US में)
-number("1000000", { locale: "fr" }); // "1 000 000"
-number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
-```
-
-### `percentage(value, options?)`
-
-संख्या को प्रतिशत स्ट्रिंग के रूप में स्वरूपित करता है।
-
-व्यवहार: 1 से अधिक मानों को पूर्ण प्रतिशत के रूप में व्याख्यायित किया जाता है और सामान्यीकृत किया जाता है (जैसे, `25` → `25%`, `0.25` → `25%`)।
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-उदाहरण:
-
-```ts
-import { percentage } from "intlayer";
-
-percentage(0.25); // "25%"
-percentage(25); // "25%"
-percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
-```
-
-### `currency(value, options?)`
-
-मूल्य को स्थानीयकृत मुद्रा के रूप में स्वरूपित करता है। डिफ़ॉल्ट रूप से `USD` और दो दशमलव अंकों के साथ।
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - सामान्य फ़ील्ड: `currency` (जैसे, `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
-
-उदाहरण:
-
-```ts
-import { currency } from "intlayer";
-
-currency(1234.5, { currency: "EUR" }); // "€1,234.50"
-currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
-```
-
-### `date(date, optionsOrPreset?)`
-
-`Intl.DateTimeFormat` के साथ तिथि/समय मान को स्वरूपित करता है।
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` या प्रीसेट्स में से एक:
-  - प्रीसेट्स: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
-उदाहरण:
-
-```ts
-import { date } from "intlayer";
-
-date(new Date(), "short"); // उदाहरण के लिए, "08/02/25, 14:30"
-date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
-```
-
-### `relativeTime(from, to = new Date(), options?)`
-
-`Intl.RelativeTimeFormat` के साथ दो समय बिंदुओं के बीच सापेक्ष समय को स्वरूपित करता है।
-
-- प्राकृतिक अभिव्यक्ति पाने के लिए पहले तर्क के रूप में "now" और दूसरे के रूप में लक्ष्य पास करें।
-- **from**: `Date | string | number`
-- **to**: `Date | string | number` (डिफ़ॉल्ट `new Date()`)
-- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - डिफ़ॉल्ट `unit` `"second"` है।
-
-उदाहरण:
-
-```ts
-import { relativeTime } from "intlayer";
-
-const now = new Date();
-const in3Days = new Date(now.getTime() + 3 * 864e5);
-relativeTime(now, in3Days, { unit: "day" }); // "3 दिनों में"
-
-const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
-relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 घंटे पहले"
-```
-
-### `units(value, options?)`
-
-`Intl.NumberFormat` के साथ `style: 'unit'` का उपयोग करके एक संख्यात्मक मान को स्थानीयकृत इकाई स्ट्रिंग के रूप में स्वरूपित करता है।
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - सामान्य फ़ील्ड: `unit` (जैसे, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - डिफ़ॉल्ट: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
-उदाहरण:
-
-```ts
-import { units } from "intlayer";
-
-units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
-units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (स्थान-निर्भर)
-```
-
-### `compact(value, options?)`
-
-संक्षिप्त संकेतन का उपयोग करके एक संख्या को स्वरूपित करता है (जैसे, `1.2K`, `1M`)।
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (अंदर `notation: 'compact'` का उपयोग करता है)
-
-उदाहरण:
-
-```ts
-import { compact } from "intlayer";
-
-compact(1200); // "1.2K"
-compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
-```
-
-### `list(values, options?)`
-
-`Intl.ListFormat` का उपयोग करके मानों की एक सरणी को स्थानीयकृत सूची स्ट्रिंग में स्वरूपित करता है।
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - सामान्य फ़ील्ड: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - डिफ़ॉल्ट: `type: 'conjunction'`, `style: 'long'`
-
-उदाहरण:
-
-```ts
-import { list } from "intlayer";
-
-list(["apple", "banana", "orange"]); // "apple, banana, and orange"
-list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
-list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
-```
-
-## Content Handling Utilities
-
-सामग्री हैंडलिंग यूटिलिटीज
-
 ## नोट्स
 
 - सभी हेल्पर `string` इनपुट स्वीकार करते हैं; उन्हें आंतरिक रूप से संख्याओं या तिथियों में परिवर्तित किया जाता है।
 - यदि प्रदान नहीं किया गया है, तो स्थानीय भाषा आपके कॉन्फ़िगर किए गए `internationalization.defaultLocale` पर डिफ़ॉल्ट होती है।
 - ये यूटिलिटीज़ पतले रैपर हैं; उन्नत स्वरूपण के लिए, मानक `Intl` विकल्पों का उपयोग करें।
-
-## प्रवेश बिंदु और पुनः-निर्यात (`@index.ts`)
-
-फॉर्मेटर कोर पैकेज में रहते हैं और उच्च-स्तरीय पैकेजों से पुनः निर्यात किए जाते हैं ताकि रनटाइम्स में आयात सहज बने रहें:
-
-उदाहरण:
-
-```ts
-// ऐप कोड (अनुशंसित)
-import {
-  number,
-  currency,
-  date,
-  relativeTime,
-  units,
-  compact,
-  list,
-  Intl,
-  getLocaleName,
-  getLocaleLang,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  getLocalizedUrl,
-  getHTMLTextDir,
-  getContent,
-  getTranslation,
-  getIntlayer,
-  getIntlayerAsync,
-} from "intlayer";
-```
-
-### रिएक्ट
-
-क्लाइंट कंपोनेंट्स:
-
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// या Next.js ऐप्स में
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-सर्वर कंपोनेंट्स (या रिएक्ट सर्वर रनटाइम):
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "intlayer/server/format";
-// या Next.js ऐप्स में
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/server/format";
-```
-
-> ये हुक्स `IntlayerProvider` या `IntlayerServerProvider` से लोकल को ध्यान में रखेंगे
-
-### Vue
-
-क्लाइंट कंपोनेंट्स:
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "vue-intlayer/format";
-```
-
-> ये कॉम्पोज़ेबल्स इंजेक्ट किए गए `IntlayerProvider` से लोकल को ध्यान में रखेंगे

package/docs/hi/how_works_intlayer.md

@@ -22,7 +22,9 @@ author: aymericzip
 
 # Intlayer कैसे काम करता है
 
-# Intlayer कैसे काम करता है
+## विषय सूची
+
+<TOC/>
 
 ## अवलोकन