आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

रिएक्ट ऐप में कलर पिकर जोड़ने से उपयोगकर्ताओं के लिए उन रंगों के बारे में निर्णय लेना बहुत आसान हो सकता है, जिनका वे उपयोग करना चाहते हैं। कलर पिकर ग्राफ़िक्स एप्लिकेशन या वैयक्तिकरण का समर्थन करने वाले किसी भी ऐप के साथ काम करने वाले उपयोगकर्ताओं के लिए एक बढ़िया टूल है।

प्रतिक्रिया-रंग पुस्तकालय आपकी आवश्यकताओं के अनुरूप विकल्पों की एक विस्तृत श्रृंखला और कई रंग पिकर शैलियों की पेशकश करता है।

अपने ऐप में कलर पिकर जोड़ना

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

प्रतिक्रिया-रंग का अवलोकन

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

instagram viewer

आपके रिएक्ट ऐप में कलर पिकर जोड़ने का कोड सीधा है। रिएक्शन-कलर लाइब्रेरी का उपयोग करने के लिए, आपको सबसे पहले लाइब्रेरी को इंस्टॉल करना होगा npm, Node.js के लिए पैकेज मैनेजर।

एनपीएम मैं प्रतिक्रिया-रंग

फिर, बस निम्नलिखित कोड को उस घटक में जोड़ें जिसे आप कलर पिकर प्रदर्शित करना चाहते हैं:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {स्केचपिकर} से'प्रतिक्रिया-रंग'
कक्षाअवयवका विस्तारप्रतिक्रिया.अवयव{
 प्रदान करना() {
वापस करना<स्केचपिकर />
 }
}
निर्यातगलती करना अवयव

उपरोक्त कोड मूल रंग पिकर प्रस्तुत करेगा। यह उपयोगकर्ताओं को रंगों की एक श्रृंखला से चयन करने की अनुमति देगा। पिकर चयनित रंग का HEX कोड भी प्रदर्शित करेगा, जिसका उपयोग आप अपने ऐप के अन्य भागों में कर सकते हैं।

उपलब्ध प्रॉप्स

प्रतिक्रिया-रंग पुस्तकालय रंग बीनने वाले को अनुकूलित करने के लिए सहारा प्रदान करता है। आप पिकर का आकार, उपलब्ध रंग, और बहुत कुछ बदलने के लिए इन प्रॉप्स का उपयोग कर सकते हैं।

कलर पिकर के लिए नीचे उपलब्ध प्रोप हैं:

  • चौड़ाई: पिक्सल में कलर पिकर की चौड़ाई।
  • ऊंचाई: पिक्सेल में रंग पिकर की ऊंचाई।
  • रंग: चयनकर्ता का प्रारंभिक रंग।
  • परिवर्तन पर: एक कॉलबैक फ़ंक्शन जो रंग बदलने पर चलता है।
  • onChangeComplete: एक कॉलबैक फ़ंक्शन जो रंग परिवर्तन पूरा होने पर चलता है।

निम्नलिखित कोड दिखाता है कि कलर पिकर के लिए सभी उपलब्ध प्रोप का उपयोग कैसे करें:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {स्केचपिकर} से'प्रतिक्रिया-रंग'

कक्षाअवयवका विस्तारप्रतिक्रिया.अवयव{

 प्रदान करना() {
वापस करना (
 चौड़ाई ={200}
 ऊँचाई = {200}
 रंग ="#ff0000"
 ऑन चेंज = {(रंग) => सांत्वना देनालॉग (रंग)}
 onChangeComplete={(रंग, घटना)=> सांत्वना देनालॉग (रंग)}
 />
 )
 }
}
निर्यातगलती करना अवयव

उपरोक्त कोड 200px की चौड़ाई, 200px की ऊँचाई, #ff0000 के प्रारंभिक रंग और रंगों के पैलेट के साथ एक रंग पिकर प्रस्तुत करेगा। यह कलर कोड के लिए एक इनपुट फील्ड भी दिखाएगा और अल्फा चैनल प्रदर्शित करेगा। जब रंग बदलता है, तो यह ऑन चेंज कॉलबैक को कॉल करेगा और नए रंग को कंसोल में लॉग करेगा।

अतिरिक्त रंग बीनने वालों को जोड़ना

प्रतिक्रिया-रंग पुस्तकालय चुनने के लिए विभिन्न रंग पिकर की एक श्रृंखला प्रदान करता है, और पिछले अनुभाग में उपयोग किए गए स्केचपिकर के अलावा, आप क्रोमपिकर का भी उपयोग कर सकते हैं।

ChromePicker को उसी तरह आयात करें जैसे आपने SketchPicker को आयात किया था:

आयात { क्रोमपिकर } से'प्रतिक्रिया-रंग';

ChromePicker आयात करने के बाद, आप निम्न कोड जोड़कर इसे अपने ऐप में उपयोग कर सकते हैं:

 रंग = { यह.राज्य.पृष्ठभूमि}
 onChangeComplete={ यह.हैंडलचेंजकंप्लीट}
 अक्षम अल्फा = {सत्य}
/>

ChromePicker SketchPicker के समान ही सहारा लेता है, लेकिन इसमें कुछ अतिरिक्त विकल्प भी होते हैं, जैसे कि अल्फा चैनल को अक्षम करने की क्षमता, जिसे आप अक्षमAlpha प्रोप के साथ कर सकते हैं। आप रंग को सीधे रंग प्रोप के साथ भी सेट कर सकते हैं।

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

कलर पिकर के साथ अपने उपयोगकर्ता अनुभव में सुधार करें

अपने रिएक्ट ऐप में कलर पिकर जोड़ना उपयोगकर्ता के अनुभव को बेहतर बनाने का एक शानदार तरीका है। यह उपयोगकर्ताओं को अपने अनुप्रयोगों के लिए जल्दी और आसानी से रंगों का चयन करने की अनुमति देता है। आप Tailwind CSS का उपयोग करके कलर पिकर को अधिक उपयोगकर्ता-अनुकूल भी बना सकते हैं।