रिएक्ट सेलेक्ट के साथ सुंदर ड्रॉपडाउन बनाएं

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

रिएक्ट सेलेक्ट ड्रॉपडाउन इनपुट की उपस्थिति और कार्यक्षमता को बढ़ाने के लिए एक लचीला और अनुकूलन योग्य समाधान प्रदान करता है।

रिएक्ट चयन स्थापित करना

अन्य पुस्तकालयों या प्रौद्योगिकियों के साथ रिएक्ट को एकीकृत करना, जैसे रिएक्ट सिलेक्ट, रिएक्ट रिडक्स और कई अन्य, विकास प्रक्रिया को सरल बना सकते हैं।

रिएक्ट सिलेक्ट के साथ आरंभ करने के लिए, आपको इसे अपने प्रोजेक्ट में इंस्टॉल करना होगा। को इसे एनपीएम का उपयोग करके करें, इस टर्मिनल कमांड को अपनी प्रोजेक्ट निर्देशिका में चलाएँ:

npm i --save react-select

यह आपके रिएक्ट प्रोजेक्ट में लाइब्रेरी को स्थापित और सेटअप करेगा, ताकि आप इसका उपयोग शुरू कर सकें।

रिएक्ट सेलेक्ट के साथ चुनिंदा इनपुट बनाना

अब जब आपने लाइब्रेरी स्थापित कर ली है, तो आप इसका उपयोग चुनिंदा इनपुट बनाने के लिए कर सकते हैं। ऐसा करने के लिए, आप का उपयोग करेंगे

चुनना अवयव। यह एक उच्च अनुकूलन योग्य घटक है जो उपयोगकर्ताओं को एक सूची से विकल्प चुनने की सुविधा देता है।

चयन घटक का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (




 </div>
 )
}
exportdefault App

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

जब आप चयन घटक प्रस्तुत करते हैं, तो इसका उपयोग करके विकल्प सरणी पास करें विकल्प प्रोप.

इस कोड ब्लॉक के साथ, रिएक्ट सेलेक्ट लाइब्रेरी इस तरह एक ड्रॉपडाउन उत्पन्न करेगी:

चयन इनपुट को अनुकूलित करना

रिएक्ट सिलेक्ट चयनित इनपुट को अनुकूलित करने के विभिन्न तरीके प्रदान करता है। आप अपनी पसंद के अनुसार सीएसएस कक्षाओं का उपयोग कर सकते हैं या इनलाइन शैलियों को सीधे चयनित इनपुट पर लागू कर सकते हैं।

सीएसएस कक्षाओं के साथ अनुकूलन

रिएक्ट सिलेक्ट लाइब्रेरी एक प्रदान करती है कक्षा का नाम के लिए सहारा चुनना अवयव। इस क्लासनेम प्रोप का उपयोग करें कस्टम कैस्केडिंग स्टाइल शीट (सीएसएस) लागू करने के लिए आपके चयनित घटकों के लिए शैलियाँ।

उदाहरण के लिए:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (



'select'/>
 </div>
 )
}
exportdefault App

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

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

शैलियों को परिभाषित करने के बाद, आपका चयन इनपुट इस तरह दिखेगा:

इनलाइन शैलियों के साथ अनुकूलन

आप जिस ऑब्जेक्ट से गुजरते हैं उसमें इनलाइन शैलियों को भी परिभाषित कर सकते हैं शैलियों का सहारा चुनना अवयव। इससे आपको व्यक्तिगत तत्वों की शैली पर अधिक नियंत्रण मिलता है।

यहाँ एक उदाहरण है:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }
return (




 </div>
 )
}
exportdefault App

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

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

इन शैलियों को लागू करने के बाद, आपका चयन इनपुट इस तरह दिखना चाहिए:

चयनित इनपुट में कार्यक्षमता जोड़ना

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

बहु-चयन कार्यक्षमता

अपने ड्रॉपडाउन में बहु-चयन कार्यक्षमता सक्षम करने के लिए, पास करें मल्टी है चयन घटक के लिए प्रोप। यह उपयोगकर्ताओं को ड्रॉपडाउन मेनू से कई विकल्प चुनने देता है।

उदाहरण के लिए:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]
return (




 </div>
 )
}
exportdefault App

यह उदाहरण दर्शाता है कि इसका उपयोग कैसे करना है मल्टी है आपके चयनित इनपुट में बहु-चयन कार्यक्षमता जोड़ने के लिए प्रोप।

खोज कार्यक्षमता

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

खोज कार्यक्षमता सक्षम करने के लिए, पास करें खोजने योग्य है के लिए सहारा चुनना अवयव। की तरह मल्टी है प्रोप, isSearchable एक बूलियन मान स्वीकार करता है।

खोज कार्यक्षमता को सक्षम करने के लिए isSearchable प्रोप का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]
return (




 </div>
 )
}
exportdefault App

उपरोक्त कोड ब्लॉक को प्रस्तुत करने पर खोज कार्यक्षमता के साथ एक चयनित इनपुट प्रदर्शित होगा। यह इस तरह दिखेगा और कार्य करेगा:

कस्टम ड्रॉपडाउन घटक बनाएं

रिएक्ट सेलेक्ट आपको कंपोनेंट्स प्रोप का उपयोग करके कस्टम ड्रॉपडाउन कंपोनेंट्स बनाने की अनुमति देता है। आप रिएक्ट सेलेक्ट द्वारा प्रदान किए गए डिफ़ॉल्ट घटकों को ओवरराइड कर सकते हैं और अपने स्वाद के अनुरूप ड्रॉपडाउन की उपस्थिति और व्यवहार को अनुकूलित कर सकते हैं।

उदाहरण के लिए:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (



{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )

const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }
return<Selectoptions={options}components={customComponents} />
}
exportdefault App

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

कोड दो कार्यात्मक घटकों को परिभाषित करता है: कस्टम विकल्प और कस्टमड्रॉपडाउन संकेतक. CustomOption घटक किसी ऑब्जेक्ट को पैरामीटर के रूप में लेता है। इस ऑब्जेक्ट में विभिन्न गुण शामिल हैं जो रिएक्ट सेलेक्ट प्रदान करता है, जैसे आंतरिकप्रॉप्स और लेबल.

CustomDropdownIndicator घटक लेता है रंगमंच की सामग्री एक पैरामीटर के रूप में. यह घटक नीचे की ओर तीर चिह्न के साथ एक कस्टम ड्रॉपडाउन संकेतक प्रस्तुत करता है। कोड एक बनाता है कस्टमघटक ऑब्जेक्ट जो कस्टमऑप्शन और कस्टमड्रॉपडाउनइंडिकेटर घटकों को संबंधित में मैप करता है विकल्प और ड्रॉपडाउन संकेतक चांबियाँ।

अंत में, यह कोड कस्टमकंपोनेंट्स ऑब्जेक्ट को सेलेक्ट कंपोनेंट के कंपोनेंट्स प्रोप में पास करता है। यह कस्टम घटकों के साथ एक चुनिंदा इनपुट प्रस्तुत करेगा, जो इस तरह दिखेगा:

मानक घटक अधिक शक्तिशाली और आकर्षक हो सकते हैं

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