अपने React Native ऐप में कमेंट विजेट जोड़ें
यह FastComments की आधिकारिक React Native लाइब्रेरी है।
अपने React Native ऐप में लाइव कमेंटिंग, चैट और रिव्यू विजेट एम्बेड करें।
रिपॉज़िटरी
AI कोडिंग एजेंट 
अपने कोडिंग एजेंट को FastComments का वह संदर्भ दें जिसकी उसे आवश्यकता है - विजेट्स, कॉन्फ़िगरेशन, Secure SSO, REST API, और SDKs:
npx skills add fastcomments/skillsयह Claude Code, Codex, Cursor, Copilot, Gemini, और skills CLI द्वारा समर्थित हर अन्य एजेंट के साथ काम करता है।
लाइव शोकेस
सार्वजनिक demo टेनेंट के विरुद्ध स्थानीय रूप से हर विजेट और फ्लो देखने के लिए, रिपो क्लोन करें और चलाएँ:
yarn bootstrap
cd example
yarn ios # या: yarn android, yarn webशोकेस एंट्री पॉइंट example/src/ShowcaseApp.tsx है — एक ऐसा ऐप जो सभी विजेट, थीम और फ्लो उपलब्ध कराता है।
yarn web टारगेट react-native-web + react-native-web-webview (जो WebView को iframe के रूप में रेंडर करता है) का उपयोग करता है। ब्राउज़र में त्वरित विज़ुअल स्मोक टेस्ट के लिए उपयोगी; injectJavaScript और onShouldStartLoadWithRequest जैसे केवल-नेटिव WebView API वेब पर पूरी तरह काम नहीं करेंगे।
इंस्टॉलेशन
npm install react-native-webview --save
npm install fastcomments-react-native --saveनेटिव SDK पर विचार करें
यह लाइब्रेरी VanillaJS लाइब्रेरी के चारों ओर एक webview का उपयोग करती है।
FastComments अब fastcomments-react-native-sdk के हिस्से के रूप में हमारे क्लाइंट का एक पूरी तरह नेटिव इम्प्लीमेंटेशन सपोर्ट करता है। यदि आप एक पूरी तरह नेटिव इम्प्लीमेंटेशन चाहते हैं, तो आप वहाँ देखना चाह सकते हैं।
उपयोग - लाइव कमेंट विजेट
API fastcomments-react से थोड़ा अलग है। Native के साथ, हम एक config ऑब्जेक्ट पास करते हैं जो इस संरचना का पालन करता है।
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // आपकी tenant id। इसे https://fastcomments.com/auth/my-account/api-secret से प्राप्त किया जा सकता है
const myAppPageId = 'native-test'; // आपके ऐप में कमेंट थ्रेड की ID या URL।
const myAppPageUrl = 'https://example.com/external-page'; // आप वैकल्पिक रूप से किसी बाहरी पेज का URL सेट कर सकते हैं
const myAppPageTitle = 'Example Title'; // ... और शायद आप इस कंटेंट के लिए एक शीर्षक चाहते हैं
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// setConfig() को कॉल करके, हम वर्तमान पेज या वर्तमान में लॉग इन यूज़र को बदलने जैसी चीज़ें कर सकते हैं
// example/src/App.tsx देखें
return (
<FastCommentsCommentWidget config={config}/>
);उपयोग - लाइव चैट विजेट
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // आपकी tenant id। इसे https://fastcomments.com/auth/my-account/api-secret से प्राप्त किया जा सकता है
const myAppPageId = 'native-test'; // आपके ऐप में कमेंट थ्रेड की ID या URL।
const myAppPageUrl = 'https://example.com/external-page'; // आप वैकल्पिक रूप से किसी बाहरी पेज का url सेट कर सकते हैं
const myAppPageTitle = 'Example Title'; // ... और शायद आप इस कंटेंट के लिए एक शीर्षक चाहते हैं
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);उपयोग - SSO
FastComments सुरक्षित SSO के लिए HMAC का उपयोग करता है। इसका उपयोग करने के लिए, अपने बैकएंड से SSO ऑब्जेक्ट (sso कॉन्फ़िग प्रॉपर्टी) बनाएं और इसे कमेंट विजेट को पास करें।
आप विभिन्न बैकएंड के लिए उदाहरण यहाँ पा सकते हैं: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
पीयर डिपेंडेंसीज़
fastcomments-react-native को react-native-webview की आवश्यकता होती है। इसलिए, आपको react-native-webview के इंस्टॉलेशन चरणों का पालन करना चाहिए।
अकाउंट क्षेत्र (ध्यान दें: EU ग्राहकों के लिए)
यदि आपका अकाउंट EU में स्थित है, तो विजेट कॉन्फ़िगरेशन में region = 'eu' सेट करें।
अन्यथा, आपको region परिभाषित करने की आवश्यकता नहीं है।
मेंटेनेंस स्थिति
ये कंपोनेंट्स हमारे मुख्य VanillaJS कंपोनेंट्स के रैपर हैं। हम इन कंपोनेंट्स को स्वचालित रूप से अपडेट कर सकते हैं (बग ठीक करना, फीचर्स जोड़ना) बिना इस लाइब्रेरी को प्रकाशित किए, इसलिए भले ही यह कुछ समय के लिए प्रकाशित न हो, इसका मतलब यह नहीं है कि FastComments सक्रिय विकास में नहीं है! अपडेट के लिए हमारे ब्लॉग को देखने के लिए स्वतंत्र महसूस करें। अंतर्निहित मुख्य लाइब्रेरी में ब्रेकिंग API परिवर्तन या फीचर्स कभी भी इस लाइब्रेरी में वर्जन बंप किए बिना शिप नहीं किए जाएंगे।
सहायता चाहिए?
यदि आपको React Native Library के बारे में कोई समस्या आती है या कोई प्रश्न है, तो कृपया:
योगदान दें
योगदान का स्वागत है! कृपया योगदान दिशानिर्देशों के लिए GitHub रिपॉजिटरी देखें।