लोकलाइज़ेशन

किट की हर बिल्ट-इन स्ट्रिंग (77 लेबल सेट में 468 लेबल: aria-label, स्क्रीन-रीडर घोषणाएँ, उन बटनों का टेक्स्ट जो आपने नहीं लिखे, प्लेसहोल्डर) एक provider से अनुवादित होती है। इसे भाषा पैक के साथ एक बार माउंट करें और हर goodui कंपोनेंट वही भाषा बोलेगा; नंबर, डेट और करेंसी फ़ॉर्मैट Intl के ज़रिए साथ चलते हैं, और अरबी व हिब्रू को उनकी दिशा मिलती है। जो ऐप इसे कभी सेट नहीं करते, वे अंग्रेज़ी और en-US फ़ॉर्मैट पर रहते हैं, बिना कुछ अतिरिक्त लोड किए।

इंस्टॉल करें

npx shadcn@latest add https://goodui.dev/r/locale.json https://goodui.dev/r/locale-tr.json

locale lib/goodui-locale.ts में आता है (लेबल वाला हर कंपोनेंट पहले से इस पर निर्भर है, इसलिए यह आमतौर पर आपके पास होगा)। पैक lib/goodui-locales/<lang>.ts में आता है और किसी और चीज़ पर निर्भर नहीं; सिर्फ़ वही भाषाएँ इंस्टॉल करें जो आप शिप करते हैं।

भाषा सेट करें

import { GooduiLocaleProvider } from "@/lib/goodui-locale"
import tr from "@/lib/goodui-locales/tr"

export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>
        <GooduiLocaleProvider lang="tr" labels={tr}>{children}</GooduiLocaleProvider>
      </body>
    </html>
  )
}

lang एक BCP 47 टैग है और किट के हर Intl फ़ॉर्मैट को चलाता है ("de-AT", "pt-BR", "en-GB" भी चलेंगे)। labels पैक है। भाषा स्विचर के लिए टैग को state में रखें और lazy import के map से पैक चुनें; नेस्टेड provider भी चलते हैं, इसलिए एक स्क्रीन दूसरी भाषा में चल सकती है।

पैक

18 भाषाएँ, हर एक की एक फ़ाइल, हर कंपोनेंट का हर लेबल। देशी नाम वैसे ही, जैसे स्विचर में दिखेंगे:

• locale-tr: Türkçe
• locale-de: Deutsch
• locale-fr: Français
• locale-es: Español
• locale-it: Italiano
• locale-pt-BR: Português (Brasil)
• locale-nl: Nederlands
• locale-pl: Polski
• locale-ru: Русский
• locale-hi: हिन्दी
• locale-id: Bahasa Indonesia
• locale-vi: Tiếng Việt
• locale-th: ไทย
• locale-ja: 日本語
• locale-ko: 한국어
• locale-zh-CN: 中文（简体）
• locale-ar: العربية (RTL)
• locale-he: עברית (RTL)

locale-en भी है: यह कंपोनेंट से जेनरेट होता है और बाकी हर पैक इसी से जाँचा जाता है। ऐप-भर में अंग्रेज़ी लेबल बदलने हों तो इसे इंपोर्ट करें।

RTL

कंपोनेंट लिखने की दिशा DOM से पढ़ते हैं (logical properties, :dir(rtl), पलटे हुए आइकन), इसलिए इसे डॉक्यूमेंट पर आप ख़ुद सेट करें: <html lang="ar" dir="rtl">। provider <html> को कभी नहीं छूता; वह सिर्फ़ lang से dir निकालता है (ar, he, fa, ur RTL हैं) उन कंपोनेंट के लिए जो पूछते हैं, और आप dir पास करके इसे ओवरराइड कर सकते हैं। आपके अपने लेआउट कोड के लिए dirOf("ar") एक्सपोर्ट किया गया है।

Intl फ़ॉर्मैट

जो कंपोनेंट मान फ़ॉर्मैट करते हैं (number-flow, counter-up, stat-card, meter, sparkline-draw, data-grid, date-picker, number-input), वे locale prop लेते हैं। सेट न हो तो अब वह "en-US" की जगह provider की भाषा है; स्पष्ट prop फिर भी जीतता है। वही फ़ॉर्मैटर hook से आपको भी मिलते हैं:

import { useGooduiLocale } from "@/lib/goodui-locale"

const { lang, dir, formatNumber, formatDate, formatRelative, formatCurrency } = useGooduiLocale()

formatNumber(12345.6)                       // "12.345,6" in de
formatDate(booking.start)                   // "3 Kas 2026" in tr; pass Intl.DateTimeFormat options for other styles
formatRelative(-2, "hour")                  // "vor 2 Stunden"
formatCurrency(49, "EUR")                   // "49,00 €"

इंस्टेंस हर भाषा और विकल्प के लिए कैश होते हैं, इसलिए इन्हें render में बुलाना ठीक है। React के बाहर createFormatters(lang) वही चार फ़ंक्शन लौटाता है।

एक लेबल ओवरराइड करें

किसी भी कंपोनेंट पर labels prop अब भी पैक पर भारी पड़ता है, इसलिए एक अकेला इंस्टेंस कुछ और कह सकता है। ऐप-भर के बदलाव के लिए पैक को spread करें:

<Dialog labels={{ confirm: "Rezervasyonu iptal et" }} … />        {/* this dialog only */}

const labels = { ...tr, alert: { ...tr.alert, dismiss: "Kapat" } }   // every alert
<GooduiLocaleProvider lang="tr" labels={labels}>

मान वाले लेबल फ़ंक्शन हैं, इसलिए बहुवचन सचमुच काम करता है: results: (n) => plural("pl", n, { one: "1 wynik", few: `${n} wyniki`, many: `${n} wyników`, other: `${n} wyniku` })। plural() lib/goodui-locale में आता है और Intl.PluralRules को रैप करता है।

भाषा जोड़ें

lib/goodui-locales/en.ts को नई फ़ाइल में कॉपी करें और मान अनुवाद करें; की और फ़ंक्शन सिग्नेचर वैसे ही रखें। रेपो में मौजूद मैनिफ़ेस्ट lib/locales/labels-manifest.json हर की को उसके प्रकार, पैरामीटर और उपयोग की जगह (aria-label, स्क्रीन रीडर, दिखने वाला टेक्स्ट) के साथ सूचीबद्ध करता है। हमारा अपना बिल्ड node scripts/extract-labels.ts चलाता है, जो कंपोनेंट से lib/goodui-locales/en.ts दोबारा जेनरेट करता है और किसी पैक में कोई कंपोनेंट, की या पैरामीटर छूटते ही फ़ेल हो जाता है, इसलिए 18 पैक कभी कंपोनेंट से पीछे नहीं रह सकते। नई भाषाओं के pull request का स्वागत है।

आज़माएँ

हर Core कंपोनेंट के Playground में भाषा चुनने का विकल्प है: प्रीव्यू उसी भाषा में फिर से रेंडर होता है (अरबी और हिब्रू के लिए RTL) और छपे स्निपेट में provider शामिल रहता है। कोई भी प्रीव्यू पेज ?lang=tr लेता है (और दिशा थोपने के लिए &dir=rtl), जैसे /preview/c/pagination?lang=ar.

goodui Native

वही पैक और मैनिफ़ेस्ट React Native किट के लिए भी योजना में हैं (foundation में एक LocaleProvider, वही कंपोनेंट id); तब तक Native कंपोनेंट अपनी स्ट्रिंग props और हर स्क्रीन के labels ऑब्जेक्ट से लेते हैं।