रिएक्ट में हॉवर को स्टाइल कैसे करें

परिचय

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

इस लेख में, हम सीखेंगे कि CSS का उपयोग करके रिएक्ट में हॉवर को कैसे स्टाइल करें, साथ ही इनलाइन होवर स्टाइल कैसे करें।

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

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

जिसकी यह मूल शैली है:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

अनिवार्य रूप से, हम पृष्ठभूमि का रंग बदल देंगे lightblue जब माउस बॉक्स के ऊपर होता है और जब माउस हटा दिया जाता है तो इसे अपनी डिफ़ॉल्ट शैली में वापस कर देता है।

रिएक्ट में हॉवर को स्टाइल कैसे करें

इसके लिए दो दृष्टिकोण हैं: बाहरी और इनलाइन। बाहरी में एक अलग सीएसएस फ़ाइल शामिल है जो होवर के लिए स्टाइल करना आसान बनाता है, जबकि इनलाइन स्टाइल हमें छद्म-वर्ग के साथ स्टाइल करने की अनुमति नहीं देता है, लेकिन हम इस लेख में माउस ईवेंट का उपयोग करके इनलाइन सीएसएस में होवर को स्टाइल करना सीखेंगे।

CSS बाहरी स्टाइलिंग के साथ प्रतिक्रिया में होवर को स्टाइल कैसे करें

यह HTML और CSS के काम करने के तरीके के समान है; हमें केवल तत्व देना है a className (नहीं class) या चयनकर्ता के रूप में टैग का उपयोग करें जिसे हम लक्षित करेंगे और फिर होवर छद्म वर्ग को स्टाइल करेंगे:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

हमने जो कुछ किया वह जोड़ा था :hover पहले स्टाइल चयनकर्ता के लिए छद्म वर्ग और माउस के तत्व के ऊपर होने पर हम किसी भी गुण को बदलना चाहते थे।

इनलाइन स्टाइलिंग के साथ प्रतिक्रिया में होवर को स्टाइल कैसे करें

इनलाइन स्टाइलिंग से हमारा मतलब एलिमेंट के टैग के माध्यम से स्टाइलिंग से है, जिसे के साथ पूरा किया जाता है style विशेषता। अगर हम पिछले कोड को इनलाइन स्टाइल में बदलना चाहते हैं:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

हमारे ऐप के भीतर इस तरह की शैलियों को दोहराए जाने से इसे पढ़ना मुश्किल हो सकता है, इसलिए हम एक स्टाइल ऑब्जेक्ट बना सकते हैं यदि हम किसी पृष्ठ पर केवल एक ऑब्जेक्ट को स्टाइल कर रहे हैं, और इसके लिए फ़ाइल बनाने की कोई आवश्यकता नहीं है:

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

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

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

इस बिंदु पर, हम सशर्त रूप से किसी भी संपत्ति का उपयोग कर स्टाइल कर सकते हैं *isHover* राज्य:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

अब तक, हमने देखा है कि इसे कैसे लागू किया जाए। अब, हमारे कोड को तोड़ते हैं और बताते हैं कि हमने सिंटैक्स का उपयोग क्यों किया। हमने एक ऐसा राज्य बनाकर शुरू किया जो एक बूलियन मान संग्रहीत करता है जो इंगित करता है कि होवरिंग कब होती है (true) और अन्यथा (डिफ़ॉल्ट रूप से यह सेट है false):

const [isHover, setIsHover] = useState(false);

फिर हमने अपने राज्य को बदलने में मदद करने के लिए div में दो ईवेंट भी जोड़े और यह जानने के लिए कि माउस कब बॉक्स पर है और कब बॉक्स से बाहर है:

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

RSI onMouseEnter घटना तब शुरू होती है जब माउस तत्व में प्रवेश करता है, जबकि onMouseLeave घटना शुरू हो जाती है जब यह छोड़ देता है। हमने इनमें से प्रत्येक घटना को एक फ़ंक्शन सौंपा है, जिसका उपयोग अब हम राज्य को बदलने के लिए करते हैं:

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

हमने सेट किया state ट्रिगर घटना के आधार पर प्रत्येक समारोह में। अंत में, हम न केवल के लिए बॉक्स को सशर्त रूप से स्टाइल करने के लिए राज्य का उपयोग कर सकते हैं backgroundColor, लेकिन किसी अन्य शैली के लिए भी:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

जब हम यह सब एक साथ रखते हैं, तो अब हम इनलाइन शैली के साथ रिएक्ट में होवर को स्टाइल करने में सक्षम हैं:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

निष्कर्ष

हमने इस लेख में बाहरी स्टाइल और इनलाइन स्टाइल दोनों का उपयोग करके रिएक्ट में हॉवर को स्टाइल करना सीखा। हालांकि इनलाइन स्टाइलिंग की अनुशंसा नहीं की जाती है, यह समझना उपयोगी है कि अगर हमें इसका उपयोग करने के लिए कहा जाता है तो यह कैसे काम करता है।