React

i1n SDK या i18next / react-intl के साथ ब्रिज मोड का उपयोग करके i1n को React के साथ एकीकृत करें।

सेटअप

अपने React प्रोजेक्ट में i1n init चलाएँ। CLI स्वचालित रूप से react-i18next या i18next का पता लगाता है यदि वे मौजूद हैं और नेस्टेड JSON प्रारूप को कॉन्फ़िगर करता है।

आप i1n SDK को स्टैंडअलोन मोड में (i18next को पूरी तरह से बदलकर) उपयोग कर सकते हैं या अपनी मौजूदा लाइब्रेरी को बनाए रखने के लिए इसे ब्रिज मोड के माध्यम से कनेक्ट कर सकते हैं।

स्टैंडअलोन मोड

प्लग-एंड-प्ले अनुभव के लिए i1n React प्रोवाइडर पैटर्न का उपयोग करें। init() के साथ इनिशियलाइज़ करें, SDK के साथ लोकेल स्टेट को सिंक करने वाला I1nProvider बनाएं, और अपने कंपोनेंट्स में useI1n() हुक का उपयोग करें।

यह दृष्टिकोण localStorage के माध्यम से स्थायी लोकेल चयन, setLocale() के साथ रनटाइम भाषा स्विचिंग, और उत्पन्न i1n.d.ts के माध्यम से पूर्ण टाइप-सेफ ऑटो-कंप्लीट प्रदान करता है — किसी बाहरी i18n लाइब्रेरी की आवश्यकता नहीं है।

i18next के साथ ब्रिज मोड

यदि आपकी परियोजना i18next का उपयोग करती है, तो इसे एक पंक्ति से कनेक्ट करें: registerI1n((key, params) => i18next.t(key, params))। i1n t() फ़ंक्शन अब बैकएंड में i18next को सौंपता है, लेकिन सख्त टाइप चेकिंग और ऑटो-कम्प्लीशन के साथ।

react-intl (FormatJS) का उपयोग करने वाली परियोजनाओं के लिए, इसका उपयोग करें: registerI1n((key, params) => intl.formatMessage({ id: key }, params))। ब्रिज मोड किसी भी अनुवाद फ़ंक्शन के साथ काम करता है — registerI1n() को कोई भी (key, params) => string कॉलबैक पास करें।

परिनियोजन

अपने बिल्ड स्टेप या CI/CD पाइपलाइन में i1n पुल जोड़ें। उत्पन्न अनुवाद फ़ाइलें और i1n.d.ts आपके रिपॉजिटरी में कमिट किए जाते हैं।

Vite, Create React App, Remix, और किसी भी React-आधारित फ्रेमवर्क के साथ काम करता है।

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

React

सेटअप

स्टैंडअलोन मोड

i18next के साथ ब्रिज मोड

परिनियोजन

संबंधित

डैशबोर्ड

ब्रिज मोड