अपने React Native ऐप में टिप्पणियाँ जोड़ें
यह FastComments का आधिकारिक React Native SDK है।
अपने React Native एप्लिकेशन से सीधे FastComments API तक पहुँचें।
रिपॉज़िटरी
AI कोडिंग एजेंट 
अपने कोडिंग एजेंट को FastComments का वह संदर्भ दें जिसकी उसे आवश्यकता है - विजेट्स, कॉन्फ़िगरेशन, Secure SSO, REST API, और SDKs:
npx skills add fastcomments/skillsयह Claude Code, Codex, Cursor, Copilot, Gemini, और skills CLI द्वारा समर्थित हर अन्य एजेंट के साथ काम करता है।
लाइव डेमो
https://fastcomments.com/commenting-system-for-react-native/ पर हर विजेट को लाइव आज़माएँ।
इंस्टॉलेशन
npm install fastcomments-react-native-sdk --saveपरिचय
यह लाइब्रेरी FastComments का एक पूर्ण react-native कार्यान्वयन है।
यह लाइव कमेंटिंग, चैट, थ्रेड्स, इमोटिकॉन्स, नोटिफिकेशन, SSO, स्किन्स, और स्टाइलशीट ऑब्जेक्ट पास करके पूर्ण अनुकूलन का समर्थन करती है। सभी एसेट्स को भी अनुकूलित किया जा सकता है, और यह डार्क मोड के आधार पर अलग-अलग एसेट्स टॉगल करने का समर्थन करती है।
इस लाइब्रेरी का लाभ यह है कि यह fastcomments-react-native रैपर से अधिक लचीली है। कमेंट्स वेबव्यू के अंदर के बजाय नेटिव कंपोनेंट्स के साथ रेंडर किए जाते हैं।
यह सब FastComments बैकएंड पर चलता है, इसलिए आपको केवल UI को शामिल करना है:
<FastCommentsLiveCommenting config={config} styles={styles} callbacks={callbacks} assets={assets}/>अधिक उदाहरणों के लिए example/src देखें।
अपने मौजूदा React Native एप्लिकेशन में लाइव चैट जोड़ें, या यहां तक कि एक सोशल नेटवर्क भी बनाएं!
स्क्रीनशॉट
अवतार, नेस्टेड रिप्लाई, वोट और बिल्ट-इन रिच-टेक्स्ट कंपोज़र के साथ लाइव थ्रेडेड कमेंटिंग, साथ में डार्क थीम और एक लाइव-चैट प्रीसेट (यहाँ react-native-web के माध्यम से रेंडर किया गया दिखाया गया है):
लाइव कमेंटिंग |
डार्क थीम |
लाइव चैट |
रिच टेक्स्ट एडिटर
यह लाइब्रेरी रिच टेक्स्ट एडिटिंग के लिए react-native-enriched का उपयोग करती है, जो एक शक्तिशाली WYSIWYG एडिटिंग अनुभव प्रदान करता है। यही एडिटर iOS, Android और वेब (react-native-web के माध्यम से) को संचालित करता है, इसलिए कंपोज़र एक ही इम्प्लीमेंटेशन के साथ हर प्लेटफ़ॉर्म पर सुसंगत व्यवहार करता है।
react-native-enriched को नेटिव पर React Native New Architecture (Fabric) की आवश्यकता होती है (RN 0.76 से डिफ़ॉल्ट, RN 0.72-0.75 पर ऑप्ट-इन), और एक बंडलर जो पैकेज की exports शर्तों को रिज़ॉल्व करता है। यह SDK RN 0.81 / React 19 के विरुद्ध विकसित और परीक्षित है। वही एडिटर react-native-web के माध्यम से वेब पर भी चलता है; एनरिच्ड एडिटर का वेब बिल्ड अपस्ट्रीम पर अभी भी प्रयोगात्मक (experimental) चिह्नित है।
विजेट्स
SDK में तीन विजेट शामिल हैं, जो FastComments Android SDK को दर्शाते हैं:
FastCommentsLiveCommenting- वोट, रिप्लाई, पेजिनेशन, मेंशन, नोटिफिकेशन और लाइव अपडेट के साथ थ्रेडेड कमेंटिंग।FastCommentsLiveChat- उसी इंजन पर एक चैट प्रीसेट: कालानुक्रमिक संदेश जिनमें नए संदेश नीचे होते हैं, सूची के नीचे कंपोज़र, एक लाइव हेडर स्ट्रिप (कनेक्शन डॉट + यूज़र काउंट), ऊपर स्क्रॉल करने पर लोड होने वाला अनंत इतिहास, नए संदेशों पर ऑटो-स्क्रॉल, बिना वोट या रिप्लाई थ्रेडिंग। हर प्रीसेट कोconfigके माध्यम से ओवरराइड किया जा सकता है।FastCommentsFeed- पोस्ट कंपोज़र, मीडिया, रिएक्शन, फ़ॉलो और लाइव न्यू-पोस्ट बैनर के साथ एक सोशल फ़ीड।
<FastCommentsLiveChat config=\{{ tenantId: 'demo', urlId: 'my-room' }}/>थीमिंग
डिफ़ॉल्ट रूप सेमांटिक डिज़ाइन टोकन (FastCommentsTheme) के एक सेट से जनरेट होता है: रंग, स्पेसिंग, रेडियस, फ़ॉन्ट साइज़, फ़ॉन्ट वेट और अवतार साइज़। किसी भी विजेट पर theme प्रॉप के माध्यम से आंशिक टोकन ओवरराइड (टाइप किए गए FastCommentsThemeOverrides) पास करें और पूरी स्टाइल ट्री सुसंगत रूप से रीस्टाइल हो जाती है:
<FastCommentsLiveCommenting config={config} theme=\{{ colors: { primary: '#FF5500' } }}/>डार्क मोड केवल एक टोकन सेट दूर है:
import { getDarkTheme } from 'fastcomments-react-native-sdk';
<FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>styles प्रॉप अभी भी सटीक नियंत्रण के लिए एक रॉ IFastCommentsStyles ट्री स्वीकार करती है। जब theme और styles दोनों प्रदान किए जाते हैं, तो स्पष्ट स्टाइल थीम वाले ट्री पर विजय रखते हैं; जब केवल styles प्रदान किया जाता है, तो यह डिफ़ॉल्ट को पूरी तरह बदल देता है (मूल व्यवहार, इसलिए मौजूदा इंटीग्रेशन और स्किन प्रभावित नहीं होते)। setupDarkModeSkin को theme प्रॉप के पक्ष में डिप्रिकेटेड कर दिया गया है।
कॉन्फ़िगरेशन विकल्प
यह लाइब्रेरी fastcomments-typescript में परिभाषित सभी कॉन्फ़िगरेशन विकल्पों का समर्थन करने का लक्ष्य रखती है, बिल्कुल वेब इम्प्लीमेंटेशन की तरह।
इनके अलावा, React Native FastCommentsRNConfig के माध्यम से कुछ SDK-विशिष्ट विकल्प जोड़ता है:
hideTopBar- कंपोज़र के ऊपर दिखाई जाने वाली लॉग-इन यूज़र / नोटिफिकेशन-बेल स्ट्रिप को छिपाएँ।usePressToEdit- उसका मेनू खोलने के लिए किसी कमेंट को दबाकर रखें।disableDownVoting- डाउन-वोट बटन छिपाएँ।renderCommentInline- कमेंटर जानकारी को कमेंट सामग्री के समान HTML ब्लॉक के अंदर रेंडर करें।renderLikesToRight- वोट/लाइक क्षेत्र को कमेंट के नीचे के बजाय दाईं ओर ले जाएँ।renderDateBelowComment- तारीख को कमेंट के नीचे रेंडर करें।showLiveStatus- कमेंट के ऊपर चैट-शैली की "Live" + यूज़र-काउंट हेडर स्ट्रिप दिखाएँ।useInlineSubmitButton- सबमिट बटन को कंपोज़र के अंदर एक आइकन के रूप में रेंडर करें।countAboveToggle-useShowCommentsToggleके साथ, "Show Comments" टॉगल के ऊपर कितने कमेंट रेंडर हों।preserveFeedScrollPosition-FastCommentsFeedअनमाउंट/रीमाउंट के दौरान अपना स्क्रॉल ऑफ़सेट याद रखता है (डिफ़ॉल्ट true)।
FastComments अवधारणाएँ
शुरू करने के लिए ध्यान रखने योग्य मुख्य अवधारणाएँ tenantId और urlId हैं। tenantId आपका FastComments.com खाता पहचानकर्ता है। urlId वह स्थान है जिससे कमेंट थ्रेड
बंधे होंगे। यह एक पेज URL, या कोई प्रोडक्ट आईडी, आर्टिकल आईडी, आदि हो सकता है।
लोकलाइज़ेशन
इन विजेट्स में सभी यूज़र-फेसिंग टेक्स्ट (बटन लेबल, प्लेसहोल्डर, खाली स्थितियाँ, "5 मिनट पहले" जैसी सापेक्ष तारीखें, त्रुटि संदेश, आदि) सर्वर-ड्रिवन हैं। कंपोनेंट्स इंग्लिश स्ट्रिंग्स को हार्ड-कोड नहीं करते; वे FastComments द्वारा अनुरोधित लोकेल के लिए सर्व किए गए अनुवाद रेंडर करते हैं।
कोई लोकेल अनुरोध करने के लिए, अपने कॉन्फ़िग में locale सेट करें:
const config = {
tenantId: 'your-tenant-id',
urlId: 'some-page',
locale: 'de_de', // de_de, fr_fr, ja_jp, es_es, आदि।
};जब कोई locale सेट नहीं होता, तो FastComments टेनेंट की डिफ़ॉल्ट भाषा सर्व करता है।
टेक्स्ट संपादित करना: अनुवाद आपके FastComments डैशबोर्ड में प्रबंधित होते हैं, इस SDK में नहीं। शब्दावली बदलने, डिफ़ॉल्ट कॉपी को ओवरराइड करने, या भाषा जोड़ने के लिए, डैशबोर्ड में अपने खाते के अनुवाद संपादित करें - परिवर्तन विजेट्स द्वारा स्वचालित रूप से उठाया जाता है, बिना किसी ऐप रिलीज़ की आवश्यकता। SDK कोई इंग्लिश फ़ॉलबैक शामिल नहीं करता, इसलिए डैशबोर्ड में आपके द्वारा खाली की गई कोई भी कुंजी खाली रेंडर होगी; हर समर्थित लोकेल के लिए कुंजियाँ भरी रखें।
यूज़र नोटिफिकेशन
FastComments कई परिदृश्यों के लिए नोटिफिकेशन का समर्थन करता है। नोटिफिकेशन कॉन्फ़िगर करने योग्य हैं, वैश्विक स्तर पर या नोटिफिकेशन/कमेंट स्तर पर ऑप्ट-आउट की जा सकती हैं, और पेज-स्तरीय सब्सक्रिप्शन का समर्थन करती हैं ताकि यूज़र किसी विशिष्ट पेज या आर्टिकल के थ्रेड्स की सदस्यता ले सकें।
उदाहरण के लिए, Secure SSO का उपयोग करके यूज़र को प्रमाणित करना और फिर समय-समय पर अपठित नोटिफिकेशन के लिए पोल करना और उन्हें यूज़र को पुश करना संभव है।
अपठित यूज़र नोटिफिकेशन प्राप्त करने और अनुवाद करने का तरीका जानने के लिए AppNotificationSecureSSO उदाहरण देखें।
Gif ब्राउज़र
डिफ़ॉल्ट रूप से, कोई इमेज या gif चयन सक्षम नहीं है। इमेज और gif अपलोड का समर्थन करने का तरीका जानने के लिए example/src/AppCommentingImageSelection.tsx देखें। इस लाइब्रेरी में एक Gif ब्राउज़र है जो खोजों और प्रदान की गई इमेज को गुमनाम बनाता है, आपको बस इसका उपयोग करना है।
परफ़ॉर्मेंस
यदि आप कोई परफ़ॉर्मेंस समस्या पहचानते हैं, तो पुन: प्रस्तुत करने के लिए एक उदाहरण के साथ, उपयोग किए गए डिवाइस सहित, एक टिकट खोलें। परफ़ॉर्मेंस सभी FastComments लाइब्रेरीज़ का एक प्रथम-श्रेणी नागरिक है।
सहायता चाहिए?
यदि आपको React Native SDK के बारे में कोई समस्या आती है या कोई प्रश्न है, तो कृपया:
योगदान देना
योगदान का स्वागत है! कृपया योगदान दिशानिर्देशों के लिए GitHub रिपॉज़िटरी देखें।