रिएक्ट में चक्र यूआई का उपयोग करके उपयोगकर्ता के अनुकूल फॉर्म कैसे बनाएं

कस्टम सीएसएस के साथ अनुप्रयोगों को स्टाइल करना तब तक मज़ेदार है जब तक कि किसी प्रोजेक्ट की जटिलता न बढ़ जाए। चुनौती पूरे एप्लिकेशन में एक सुसंगत डिज़ाइन को स्टाइल करने और बनाए रखने में है।

हालाँकि आप अभी भी सीएसएस का उपयोग कर सकते हैं, चक्र यूआई जैसी यूआई-स्टाइलिंग लाइब्रेरी का उपयोग करना अक्सर अधिक प्रभावी होता है। यह लाइब्रेरी पूर्व-परिभाषित यूआई घटकों और उपयोगिता प्रॉप्स का उपयोग करके आपके ऐप्स को स्टाइल करने का एक त्वरित और परेशानी मुक्त तरीका प्रदान करती है।

रिएक्ट एप्लिकेशन में चक्र यूआई के साथ शुरुआत करना

आरंभ करने के लिए चक्र यूआई, आगे बढ़ो और, क्रिएट-रिएक्शन-ऐप का उपयोग करके एक बुनियादी रिएक्ट एप्लिकेशन तैयार करें आज्ञा। वैकल्पिक रूप से, आप कर सकते हैं रिएक्ट प्रोजेक्ट बनाने के लिए Vite का उपयोग करें.

इसके बाद, इन निर्भरताओं को स्थापित करें:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

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

चक्र का थीम प्रदाता जोड़ें

इन निर्भरताओं को स्थापित करने के बाद, आपको एप्लिकेशन को इसके साथ लपेटना होगा

चक्रप्रदाता. आप प्रदाता को अपने में जोड़ सकते हैं Index.jsx, मुख्य.जेएसएक्स, या ऐप.जेएसएक्स निम्नलिखित नुसार:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { ChakraProvider } from'@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(



 </ChakraProvider>
 </React.StrictMode>,
)

के साथ आवेदन को लपेटना चक्रप्रदाता आपके पूरे एप्लिकेशन में चक्र यूआई के घटकों और स्टाइलिंग गुणों तक पहुंचने के लिए आवश्यक है।

विभिन्न थीम टॉगल करें

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

अंधेरे और प्रकाश थीम को टॉगल करने के लिए, एक बनाएं घटक/थीमटॉगलर.जेएसएक्स फ़ाइल में स्रोत निर्देशिका और निम्नलिखित कोड शामिल करें।

import React from'react'
import { useColorMode, Box, IconButton} from'@chakra-ui/react';
import { SunIcon, MoonIcon } from'@chakra-ui/icons'
exportdefaultfunctionThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
"center" py={4} >
 icon={colorMode 'light'? <MoonIcon />: <SunIcon />}
 onClick={toggleColorMode}
 variant="ghost"
 />
Toggle Theme</h2>
 </Box>
 );
}

अब, आगे बढ़ें, और आइकन पैकेज आयात करें:

npm i @chakra-ui/icons

थीमटॉगलर घटक एक बटन प्रस्तुत करेगा जो उपयोगकर्ताओं को ऐप में प्रकाश और अंधेरे विषयों के बीच स्विच करने देता है।

यह घटक वर्तमान रंग मोड तक पहुंचता है ColorMode का उपयोग करें हुक और का उपयोग करता है ColorMode टॉगल करें मोड के बीच स्विच करने का कार्य।

चिह्नबटन घटक एक बटन की क्लिक करने योग्य क्षमताओं के साथ-साथ एक आइकन की विशेषताओं को भी अपनाता है।

एक लॉगिन फॉर्म यूआई बनाएं

कोई नया बनाएं लॉगिन.जेएसएक्स फ़ाइल में अवयव निर्देशिका, और इसमें निम्नलिखित कोड जोड़ें:

सबसे पहले, इन आयातों को जोड़ें.

import React, { useState } from'react';
import { 
 Box,
 Button,
 Card,
 CardBody,
 Center,
 Flex,
 FormControl,
 FormLabel,
 Heading,
 HStack,
 Input,
 Stack,
 VStack,
 useColorMode,
} from'@chakra-ui/react';

इन यूआई घटकों को आयात करने के बाद, रिएक्ट कार्यात्मक घटक और मुख्य कंटेनर घटकों को परिभाषित करें जो लॉगिन यूजर इंटरफेस के लिए सभी तत्वों को रखेंगे।

functionLogin() {
const { colorMode } = useColorMode();
return (

"center" align="center" height="80vh" >



 </Stack>
 </Center>
 </Flex>
 </Box>
 );
}
exportdefault Login;

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

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

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

'6'>
 fontWeight='500'
 fontSize='30px'
 letterSpacing='-0.5px'
 >
 Login
 </Heading> 
</VStack>

वीस्टैक घटक अपने बाल तत्वों को ऊर्ध्वाधर दिशा में ढेर करता है। इसके बाद, कार्ड घटक बनाएं जिसमें लॉगिन फॉर्म और उसके तत्व शामिल होंगे।

'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>



'4'>

'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Email Address</FormLabel>
 type='text'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={email}
 />
 </FormControl>

'space-between'>
'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Password</FormLabel>
as='a'
 href='#'
 variant='link'
 size='xs'
 color='#0969da'
 fontWeight='500'
 >
 Forgot password?
 </Button>
 </HStack>
 type='password'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={password}
 />
 </FormControl>
 type="submit"
 bg='#2da44e'
 color='white'
 size='sm'
 _hover={{ bg: '#2c974b' }}
 _active={{ bg: '#298e46' }}
 >
 Sign in
 </Button>
 </Stack>
 </form>
 </CardBody>
 </Card>

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

import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (




 </div>
 )
}

महान! परिवर्तनों को अद्यतन करने के लिए विकास सर्वर प्रारंभ करें।

npm run dev

अब, एक बार जब पेज ब्राउज़र पर लोड हो जाता है, तो यह प्रारंभ में डिफ़ॉल्ट लाइट मोड थीम प्रदर्शित करेगा।

अब, क्लिक करें थीम टॉगल करें थीम मोड स्विच करने के लिए आइकन बटन।

रिएक्ट हुक का उपयोग करके फॉर्म स्टेट का प्रबंधन करना

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

लॉगिन कार्यात्मक घटक के अंदर निम्नलिखित स्थितियों को परिभाषित करें।

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);

इसके बाद, जोड़ें परिवर्तन पर हैंडलर फ़ंक्शन जो इनपुट फ़ील्ड में परिवर्तनों को सुनेगा, इनपुट कैप्चर करेगा, और तदनुसार ईमेल और पासवर्ड स्थिति को अपडेट करेगा।

इन कोड स्टेटमेंट को इनपुट फ़ील्ड में जोड़ें।

onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

इन परिवर्तनों के साथ, अब आप उपयोगकर्ता इनपुट कैप्चर करते हैं।

चक्र यूआई की अंतर्निहित सुविधाओं के साथ फॉर्म सत्यापन और त्रुटि प्रबंधन को लागू करना

अब, एक हैंडलर फ़ंक्शन जोड़ें जो इनपुट को संसाधित करेगा और उचित परिणाम देगा। पर रूप एलिमेंट ओपनिंग टैग, जोड़ें ऑनसबमिट हैंडलर फ़ंक्शन इस प्रकार है।

अगला, परिभाषित करें हैंडलसबमिट करें समारोह। आपके द्वारा परिभाषित राज्यों के ठीक नीचे, निम्नलिखित कोड शामिल करें।

const handleSubmit = async event => {
 event.preventDefault();
 setIsLoading(true); 
try {
await userLogin({ email, password });
 setSuccess('Logged in successfully!');
 setIsLoading(false);
 setIsLoggedIn(true);
 } catch (error) {
 setError('Invalid username or password!');
 setIsLoading(false);
 setEmail('');
 setPassword('');
 }
};

यह अतुल्यकालिक हैंडलसबमिट करें जब कोई फ़ॉर्म सबमिट करेगा तो फ़ंक्शन ट्रिगर हो जाएगा। फ़ंक्शन लोडिंग स्थिति को सही पर सेट करता है—एक प्रसंस्करण क्रिया का अनुकरण करता है। आप उपयोगकर्ता को दृश्य संकेत प्रदान करने के लिए चक्र यूआई के लोडिंग स्पिनर को प्रस्तुत कर सकते हैं।

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

प्रमाणीकरण एपीआई अनुरोध का अनुकरण करें

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

हैंडल सबमिट फ़ंक्शन के ठीक नीचे, यह कोड जोड़ें:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email '[email protected]' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

यह कोड एक अतुल्यकालिक फ़ंक्शन को परिभाषित करता है जो एक सरल तर्क सत्यापन तर्क निष्पादित करता है।

चक्र की यूआई सुविधाओं को संभालने में त्रुटि।

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

Alert, AlertIcon, AlertTitle, CircularProgress

अब, फॉर्म एलिमेंट ओपनिंग टैग के ठीक नीचे निम्नलिखित कोड जोड़ें।

{error && !isLoggedIn && 
'error' variant='solid'> 

{error}</AlertTitle>
 </Alert>
}
{isLoggedIn && ( 
"success" variant='solid'>

{success}</AlertTitle>
 </Alert>
)}

अंत में, लोडिंग स्पिनर, सर्कुलर प्रोग्रेस, घटक को शामिल करने के लिए सबमिट बटन पर यह अपडेट करें।

{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}

सफलतापूर्वक लॉग इन करने के बाद उपयोगकर्ता को यह दिखाई देगा:

यदि लॉगिन प्रक्रिया में कोई त्रुटि है, तो उन्हें इस तरह की प्रतिक्रिया दिखनी चाहिए:

चक्र यूआई के साथ अपनी विकास प्रक्रिया में सुधार करें

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