रिएक्ट हुक फॉर्म और मटेरियल यूआई के साथ स्टाइलिश नेक्स्ट.जेएस फॉर्म बनाएं

मटेरियल यूआई (एमयूआई) एक लोकप्रिय घटक लाइब्रेरी है जो Google के मटेरियल डिज़ाइन सिस्टम को लागू करती है। यह पूर्व-निर्मित यूआई घटकों की एक विस्तृत श्रृंखला प्रदान करता है जिनका उपयोग आप कार्यात्मक और दृश्यमान रूप से आकर्षक इंटरफेस बनाने के लिए कर सकते हैं।

भले ही इसे रिएक्ट के लिए डिज़ाइन किया गया है, आप इसकी क्षमताओं को रिएक्ट के पारिस्थितिकी तंत्र के भीतर Next.js जैसे अन्य फ्रेमवर्क तक बढ़ा सकते हैं।

रिएक्ट हुक फॉर्म और मटेरियल यूआई के साथ शुरुआत करना

रिएक्ट हुक फॉर्म एक लोकप्रिय लाइब्रेरी है जो फॉर्म बनाने, प्रबंधित करने और मान्य करने का एक सरल और घोषणात्मक तरीका प्रदान करती है।

एकीकृत करके सामग्री यूआई यूआई घटकों और शैलियों, आप अच्छे दिखने वाले फॉर्म बना सकते हैं जो उपयोग में आसान हैं, और अपने नेक्स्ट.जेएस एप्लिकेशन पर एक सुसंगत डिज़ाइन लागू कर सकते हैं।

आरंभ करने के लिए, स्थानीय स्तर पर Next.js प्रोजेक्ट तैयार करें। इस गाइड के प्रयोजन के लिए, स्थापित करें Next.js का नवीनतम संस्करण जो ऐप निर्देशिका का उपयोग करता है.

npx create-next-app@latest next-project --app

इसके बाद, इन पैकेजों को अपने प्रोजेक्ट में इंस्टॉल करें:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

आप क्या बनाएंगे इसका पूर्वावलोकन यहां दिया गया है:

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

फॉर्म बनाना और स्टाइल करना

रिएक्ट हुक फॉर्म विभिन्न प्रकार के उपयोगिता कार्य प्रदान करता है, जिनमें शामिल हैं उपयोग प्रपत्र अंकुश।

यह हुक फॉर्म प्रबंधन के मूलभूत पहलुओं को सरल बनाते हुए फॉर्म स्थिति, इनपुट सत्यापन और सबमिशन को संभालने की प्रक्रिया को सुव्यवस्थित करता है।

इस हुक का उपयोग करने वाला एक फॉर्म बनाने के लिए, निम्नलिखित कोड को एक नई फ़ाइल में जोड़ें, src/components/form.js.

सबसे पहले, रिएक्ट हुक फॉर्म और एमयूआई पैकेज के लिए आवश्यक आयात जोड़ें:

"use client"
import React, {useState} from'react';
import { useForm } from'react-hook-form';
import { TextField, Button as MuiButton, Alert } from'@mui/material';
import { styled } from'@mui/system';

एमयूआई उपयोग के लिए तैयार यूआई घटकों का एक संग्रह प्रदान करता है जिसे आप स्टाइलिंग प्रॉप्स पास करके और अधिक अनुकूलित कर सकते हैं।

फिर भी, यदि आप यूआई डिज़ाइन पर अधिक लचीलापन और नियंत्रण चाहते हैं, तो आप सीएसएस गुणों के साथ अपने यूआई तत्वों को स्टाइल करने के लिए स्टाइल विधि का उपयोग करने का विकल्प चुन सकते हैं। इस मामले में, आप प्रपत्र के मुख्य घटकों को स्टाइल कर सकते हैं: मुख्य कंटेनर, प्रपत्र स्वयं, और इनपुट टेक्स्ट फ़ील्ड।

आयात के ठीक नीचे, यह कोड जोड़ें:

const FormContainer = styled('div')({
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 height: '100vh',
});
const StyledForm = styled('form')({
 width: '80%',
 maxWidth: '400px',
 padding: '20px',
 borderRadius: '10px',
 border: '2px solid #1E3A8A',
 boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
 backgroundColor: '#ffffff',
 textAlign: 'center',
});
const StyledTextField = styled(TextField)({
 marginBottom: '16px',
 width: '100%',
});

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

इस तरह, आप इन घटकों को अपने एप्लिकेशन के विभिन्न हिस्सों में आसानी से आयात और उपयोग कर सकते हैं, जिससे आपका कोड अधिक व्यवस्थित और रखरखाव योग्य हो जाएगा।

अब, कार्यात्मक घटक को परिभाषित करें:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

अंत में, इस घटक को अपने में आयात करें ऐप/पेज.जेएस फ़ाइल। सभी बॉयलरप्लेट नेक्स्ट.जेएस कोड हटाएं और इसे निम्नलिखित के साथ अपडेट करें:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

विकास सर्वर प्रारंभ करें, और आपको अपने ब्राउज़र में दो इनपुट फ़ील्ड और एक सबमिट बटन के साथ एक मूल फॉर्म देखना चाहिए।

फॉर्म सत्यापन को संभालना

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

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

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

इसके बाद, क्रेडेंशियल्स को सत्यापित करने के लिए एक हैंडलर फ़ंक्शन बनाएं। यह फ़ंक्शन एक HTTP एपीआई अनुरोध का अनुकरण करेगा जो आम तौर पर तब होता है जब क्लाइंट ऐप्स बैकएंड प्रमाणीकरण एपीआई के साथ इंटरैक्ट करते हैं।

const onSubmit = (data) => {
if (data.username 'testuser' && data.password 'password123') {
 setFormStatus({ success: true, error: '' });
 } else {
 setFormStatus({ success: false, error: 'Invalid username or password' });
 }
};

जब कोई उपयोगकर्ता सबमिट बटन पर क्लिक करता है तो ऑनसबमिट फ़ंक्शन को ट्रिगर करने के लिए बटन घटक में एक ऑनक्लिक इवेंट हैंडलर फ़ंक्शन जोड़ें - इसे एक प्रोप के रूप में पास करें।

onClick={handleSubmit(onSubmit)}

का मूल्य formStatus राज्य चर महत्वपूर्ण है क्योंकि यह निर्धारित करेगा कि आप उपयोगकर्ता को प्रतिक्रिया कैसे प्रदान करते हैं। यदि उपयोगकर्ता सही क्रेडेंशियल दर्ज करता है, तो आप एक सफलता संदेश दिखा सकते हैं। यदि आपके Next.js एप्लिकेशन में अन्य पेज हैं, तो आप उन्हें एक अलग पेज पर रीडायरेक्ट कर सकते हैं।

यदि क्रेडेंशियल गलत हैं तो आपको उचित फीडबैक भी देना चाहिए। मटेरियल यूआई एक बेहतरीन फीडबैक घटक प्रदान करता है जिसका उपयोग आप इसके साथ कर सकते हैं रिएक्ट की सशर्त प्रतिपादन तकनीक फॉर्मस्टैटस के मूल्य के आधार पर, उपयोगकर्ता को सूचित करना।

ऐसा करने के लिए, ठीक नीचे निम्नलिखित कोड जोड़ें स्टाइलफॉर्म उद्घाटन टैग.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"error">{formStatus.error}</Alert>
): null}

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

यह फ़ंक्शन कई तर्क लेता है, जिसमें इनपुट फ़ील्ड का नाम और एक सत्यापन पैरामीटर ऑब्जेक्ट शामिल है। यह ऑब्जेक्ट इनपुट फ़ील्ड के लिए विशिष्ट पैटर्न और न्यूनतम लंबाई जैसे सत्यापन नियम निर्दिष्ट करता है।

आगे बढ़ें और उपयोगकर्ता नाम में निम्नलिखित कोड को प्रोप के रूप में शामिल करें स्टाइल टेक्स्ट फ़ील्ड अवयव।

{...register('username', {
 required: 'Username required',
 pattern: {
 value: /^[a-zA-Z0-9_.-]*$/,
 message: 'Invalid characters used'
 },
 minLength: {
 value: 6,
 message: 'Username must be at least 6 characters'
 },
})}

अब, निम्नलिखित ऑब्जेक्ट को प्रोप के रूप में जोड़ें पासवर्डस्टाइल टेक्स्ट फ़ील्ड अवयव।

{...register('password', {
 required: 'Password required',
 minLength: {
 value: 8,
 message: 'Password must be at least 8 characters'
 },
})}

इनपुट आवश्यकताओं पर दृश्य प्रतिक्रिया प्रदान करने के लिए उपयोगकर्ता नाम इनपुट फ़ील्ड के नीचे निम्नलिखित कोड जोड़ें।

यह कोड उपयोगकर्ता को आवश्यकताओं के बारे में सूचित करने के लिए एक त्रुटि संदेश के साथ एक अलर्ट ट्रिगर करेगा, ताकि यह सुनिश्चित हो सके कि वे फॉर्म सबमिट करने से पहले किसी भी त्रुटि को ठीक कर लें।

{errors.username && <Alertseverity="error">{errors.username.message}Alert>}

अंत में, पासवर्ड इनपुट टेक्स्ट फ़ील्ड के ठीक नीचे समान कोड शामिल करें:

{errors.password && <Alertseverity="error">{errors.password.message}Alert>}

बहुत बढ़िया! इन परिवर्तनों के साथ, आपके पास रिएक्ट हुक फॉर्म और मटेरियल यूआई के साथ एक आकर्षक, कार्यात्मक फॉर्म होना चाहिए।

क्लाइंट-साइड लाइब्रेरीज़ के साथ अपना Next.js विकास बढ़ाएँ

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

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