React में एक्सपोर्ट करें

NueForm किसी भी फॉर्म को एक स्व-निहित React कंपोनेंट फ़ाइल के रूप में एक्सपोर्ट कर सकता है। iframe एम्बेड करने के बजाय, आपको एक वास्तविक React कंपोनेंट मिलता है जिसमें आपका फॉर्म डेटा, रेंडरर, और सभी फ़ील्ड कंपोनेंट एक ही फ़ाइल में बंडल होते हैं। इसे अपने React ऐप में डालें और यह तुरंत काम करता है।

React एक्सपोर्ट एक Pro+ सुविधा है। इसके लिए Pro ($29/माह) या Enterprise ($99/माह) प्लान आवश्यक है।

क्या एक्सपोर्ट होता है

जब आप एक फॉर्म एक्सपोर्ट करते हैं, NueForm एक एकल TypeScript (.tsx) फ़ाइल जनरेट करता है जिसमें शामिल होता है:

आपका फॉर्म डेटा --- सभी प्रश्न, गुण, विकल्प, लॉजिक जम्प्स, वेरिएबल्स, और थीम सेटिंग्स एक कॉन्स्टेंट के रूप में एम्बेडेड।
फॉर्म रेंडरर --- नेविगेशन, प्रगति ट्रैकिंग, एनिमेशन, और कीबोर्ड शॉर्टकट सहित पूर्ण NueForm रेंडरिंग इंजन।
सभी आवश्यक फ़ील्ड कंपोनेंट --- केवल आपके फॉर्म द्वारा उपयोग किए जाने वाले फ़ील्ड कंपोनेंट शामिल होते हैं (जैसे, यदि आपके फॉर्म में कोई रेटिंग प्रश्न नहीं है, तो रेटिंग फ़ील्ड कंपोनेंट छोड़ दिया जाता है)।
यूटिलिटी फंक्शन --- लॉजिक जम्प मूल्यांकन, वेरिएबल इंटरपोलेशन, और लागू होने पर क्विज़ स्कोरिंग।

एक्सपोर्ट की गई फ़ाइल स्व-निहित है --- इसकी NueForm के सर्वर या API पर कोई निर्भरता नहीं है। आपका फॉर्म पूरी तरह क्लाइंट-साइड काम करता है।

कैसे एक्सपोर्ट करें

डैशबोर्ड से

NueForm बिल्डर में अपना फॉर्म खोलें।
शीर्ष टूलबार में Export बटन पर क्लिक करें।
एक्सपोर्ट मोडल आपका कंपोनेंट जनरेट करेगा।
फ़ाइल प्राप्त करने के लिए Copy to Clipboard या Download पर क्लिक करें।

API से

bash

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=true" \
  -H "Authorization: Bearer nf_your_api_key" \
  -o MyForm.tsx

क्वेरी पैरामीटर:

पैरामीटर	मान	डिफ़ॉल्ट	विवरण
`lang`	`tsx`	`tsx`	आउटपुट भाषा (TypeScript JSX)
`obfuscate`	`true`, `false`	`true`	कोड सुरक्षा लागू करें (मिनिफिकेशन)

एक्सपोर्ट किए गए कंपोनेंट का उपयोग

चरण 1: फ़ाइल को अपने प्रोजेक्ट में जोड़ें

डाउनलोड की गई फ़ाइल को अपनी कंपोनेंट डायरेक्टरी में रखें:

text

src/
  components/
    CustomerFeedbackForm.tsx    <-- आपका एक्सपोर्ट किया गया फॉर्म
    ...

चरण 2: Peer Dependencies इंस्टॉल करें

एक्सपोर्ट किया गया कंपोनेंट अपनी peer dependencies सूचीबद्ध करता है। उन्हें इंस्टॉल करें:

bash

npm install react react-dom

कुछ प्रश्न प्रकारों को अतिरिक्त dependencies की आवश्यकता होती है:

प्रश्न प्रकार	अतिरिक्त Dependency
`signature` / `drawing`	कोई नहीं (नेटिव Canvas API का उपयोग करता है)
`markdown`	यदि आप markdown प्रश्नों का उपयोग करते हैं तो एक markdown रेंडरर

एक्सपोर्ट मोडल आपके विशिष्ट फॉर्म के लिए आवश्यक सटीक dependencies दिखाता है।

चरण 3: इम्पोर्ट और रेंडर करें

tsx

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm />
    </div>
  );
}

कंपोनेंट डिफ़ॉल्ट रूप से एक फुल-स्क्रीन फॉर्म अनुभव रेंडर करता है।

चरण 4: सबमिशन हैंडल करें

एक्सपोर्ट किया गया फॉर्म पूरी तरह क्लाइंट-साइड रेंडर होता है। डिफ़ॉल्ट रूप से, यह पूरा होने पर धन्यवाद स्क्रीन दिखाता है लेकिन कहीं भी डेटा नहीं भेजता। आपको अपना सबमिशन हैंडलर जोड़ना होगा।

कंपोनेंट एक onSubmit कॉलबैक स्वीकार करता है:

tsx

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  const handleSubmit = async (answers: Array<{ questionId: string; value: unknown }>) => {
    await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers }),
    });
  };

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm onSubmit={handleSubmit} />
    </div>
  );
}

एक्सपोर्ट किए गए फॉर्म को कस्टमाइज़ करना

चूंकि एक्सपोर्ट एक मानक React कंपोनेंट फ़ाइल है, आप इसे कई तरीकों से कस्टमाइज़ कर सकते हैं:

थीम ओवरराइड

फॉर्म की थीम (रंग, फ़ॉन्ट, आकार) एक्सपोर्ट किए गए डेटा में एम्बेडेड होती है। आप इन मानों को सीधे एक्सपोर्ट की गई फ़ाइल में संशोधित कर सकते हैं:

tsx

const FORM_DATA = {
  themeColor: '#6366f1',
  backgroundColor: '#0a0a0a',
  textColor: '#ffffff',
  // ...
};

CSS कस्टमाइज़ेशन

एक्सपोर्ट किया गया कंपोनेंट fc- (फॉर्म कंपोनेंट) से प्रीफिक्स्ड CSS क्लास नाम का उपयोग करता है। आप अपने CSS में स्टाइल ओवरराइड कर सकते हैं:

css

.fc-question-title {
  font-size: 2rem;
  font-weight: 700;
}

.fc-submit-button {
  background-color: #10b981;
  border-radius: 12px;
}

कस्टम लॉजिक जोड़ना

आप कस्टम व्यवहार जोड़ने के लिए एक्सपोर्ट की गई फ़ाइल को संशोधित कर सकते हैं:

NueForm द्वारा समर्थित से परे सत्यापन नियम जोड़ें।
अपने ऐप के स्टेट मैनेजमेंट (Redux, Zustand, आदि) के साथ इंटीग्रेट करें।
विशिष्ट प्रश्नों में कस्टम एनालिटिक्स ट्रैकिंग जोड़ें।
अपने ऐप के उपयोगकर्ता डेटा से उत्तर पहले से भरें।

यदि आप एक्सपोर्ट की गई फ़ाइल को संशोधित करते हैं, तो भविष्य के री-एक्सपोर्ट आपके बदलावों को ओवरराइट कर देंगे। एक्सपोर्ट किए गए कंपोनेंट को सीधे संशोधित करने के बजाय उसे रैप करने पर विचार करें, या अपने कस्टमाइज़ेशन एक अलग फ़ाइल में रखें।

कोड सुरक्षा

एक्सपोर्ट किए गए कंपोनेंट में डिफ़ॉल्ट रूप से कोड सुरक्षा शामिल होती है (obfuscate=true पैरामीटर)। यह कंपोनेंट को पूरी तरह कार्यात्मक रखते हुए वेरिएबल नाम और आंतरिक कार्यान्वयन विवरण को मिनिफाई करता है।

कोड सुरक्षा:

आंतरिक वेरिएबल और फंक्शन नामों को मिनिफाई करती है।
सभी कार्यक्षमता संरक्षित रखती है --- फॉर्म समान रूप से काम करता है।
कोड को पढ़ना और रिवर्स-इंजीनियर करना कठिन बनाती है।
फॉर्म डेटा को एन्क्रिप्ट या छिपाती नहीं है (प्रश्न और विकल्प एम्बेडेड कॉन्स्टेंट में दिखाई देते हैं)।

कोड सुरक्षा के बिना एक्सपोर्ट करने के लिए (आसान डिबगिंग के लिए), obfuscate=false सेट करें:

bash

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=false" \
  -H "Authorization: Bearer nf_your_api_key"

समर्थित प्रश्न प्रकार

React एक्सपोर्ट में निम्नलिखित प्रश्न प्रकार समर्थित हैं:

प्रश्न प्रकार	समर्थित
`short_text`	हां
`long_text`	हां
`email`	हां
`phone`	हां
`number`	हां
`url` / `website`	हां
`multiple_choice`	हां
`dropdown`	हां
`yes_no`	हां
`rating`	हां
`opinion_scale`	हां
`nps`	हां
`date`	हां
`legal`	हां
`statement`	हां
`ranking`	हां
`picture_choice`	हां
`matrix`	हां
`signature`	हां
`file_upload`	हां
`markdown`	हां
`summary`	हां
`question_group`	हां
`multi_question_page`	हां
`welcome_screen`	हां
`end_screen`	हां
`drawing`	हां
`save_questions`	हां

सीमाएं

फ़ाइल अपलोड --- एक्सपोर्ट किए गए फॉर्म में फ़ाइल अपलोड UI शामिल होता है, लेकिन आपको अपना खुद का अपलोड एंडपॉइंट प्रदान करना होगा क्योंकि यह NueForm के स्टोरेज का उपयोग नहीं कर सकता।
रिकॉर्डिंग --- वीडियो/ऑडियो रिकॉर्डिंग ब्राउज़र API पर निर्भर करती है और स्टोरेज के लिए अतिरिक्त सेटअप की आवश्यकता हो सकती है।
भुगतान --- भुगतान प्रश्न React एक्सपोर्ट में शामिल नहीं होते क्योंकि उन्हें सर्वर-साइड Stripe इंटीग्रेशन की आवश्यकता होती है।
सर्वर-साइड सुविधाएं --- NueForm के बैकएंड पर निर्भर सुविधाएं (webhooks, एनालिटिक्स, रिस्पॉन्स स्टोरेज) एक्सपोर्ट किए गए फॉर्म में उपलब्ध नहीं हैं। आपको इन्हें अपने बैकएंड में लागू करना होगा।
अपडेट --- एक्सपोर्ट किए गए फॉर्म स्थिर स्नैपशॉट हैं। यदि आप NueForm में फॉर्म अपडेट करते हैं, तो आपको फ़ाइल को री-एक्सपोर्ट और बदलना होगा।

सर्वोत्तम प्रथाएं

रैप करें, संशोधित न करें। अपने कस्टमाइज़ेशन के लिए एक्सपोर्ट किए गए फॉर्म के चारों ओर एक रैपर कंपोनेंट बनाएं। इस तरह, री-एक्सपोर्ट करने से आपका कस्टम लॉजिक ओवरराइट नहीं होता।
सबमिशन सर्वर-साइड हैंडल करें। सत्यापन और स्टोरेज के लिए हमेशा फॉर्म डेटा अपने बैकएंड पर भेजें। केवल क्लाइंट-साइड फॉर्म सबमिशन पर कभी भरोसा न करें।
अपने एक्सपोर्ट का संस्करण रखें। ट्रैक रखें कि आपने फॉर्म का कौन सा संस्करण एक्सपोर्ट किया, ताकि आप आसानी से री-एक्सपोर्ट कर सकें और बदलावों की तुलना कर सकें।
एक्सपोर्ट के बाद परीक्षण करें। प्रोडक्शन में डिप्लॉय करने से पहले हमेशा अपने लक्ष्य एप्लिकेशन में एक्सपोर्ट किए गए फॉर्म का परीक्षण करें।

React में एक्सपोर्ट करें

सीमाएं

संबंधित