यूज़रेड्यूसर और यूज़रेफ का उपयोग करके टेलविंड सीएसएस के साथ रिएक्ट में ड्रॉपडाउन कैसे बनाएं

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

परिचय

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

यूज़रेड्यूसर और यूज़रेफ क्या हैं?

कोड में गोता लगाने से पहले, आइए उन दो रिएक्ट हुक को समझें जिनका हम उपयोग करेंगे:

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

• useRef: यह हुक सीधे DOM तत्वों को संदर्भित करने का एक तरीका प्रदान करता है। यह री-रेंडर को ट्रिगर किए बिना तत्वों तक पहुंचने और उनमें हेरफेर करने के लिए उपयोगी है। हमारे मामले में, हम यह जांचने के लिए useRef का उपयोग करेंगे कि ड्रॉपडाउन मेनू के बाहर कोई क्लिक हुआ है या नहीं।

चरण-दर-चरण कार्यान्वयन

चरण 1: प्रोजेक्ट सेट करें

सबसे पहले, सुनिश्चित करें कि आपके पास टेलविंड सीएसएस के साथ एक रिएक्ट प्रोजेक्ट स्थापित है। यदि आपके पास कोई नहीं है, तो आप Create React App का उपयोग करके इसे बना सकते हैं:

npx create-react-app my-dropdown-app
cd my-dropdown-app
npm install tailwindcss
npx tailwindcss init

अपने टेलविंड.कॉन्फिग.जेएस में निम्नलिखित पंक्तियां जोड़कर टेलविंड को कॉन्फ़िगर करें:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

फिर, अपने Index.css में टेलविंड निर्देश जोड़ें:

@tailwind base;
@tailwind components;
@tailwind utilities;

चरण 2: फ़ॉन्ट विस्मयकारी स्थापित करें

फ़ॉन्ट विस्मयकारी आइकन का उपयोग करने के लिए, आपको @fortawesome/react-fontawesome पैकेज स्थापित करना होगा:

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

चरण 3: नेवबार घटक बनाएं

अपनी src निर्देशिका में, Navbar.tsx नामक एक नई फ़ाइल बनाएं। इस घटक में ड्रॉपडाउन शामिल होंगे।

नेवबार कोड लागू करें

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

import React, { useRef, useEffect, useReducer } from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faUser, faCaretDown } from '@fortawesome/free-solid-svg-icons';

interface IState {
  isProfileOpen: boolean;
  isNotificationOpen: boolean;
}

type Action =
  | { type: 'toggleProfile' }
  | { type: 'toggleNotification' }
  | { type: 'closeAll' };

function reducer(state: IState, action: Action): IState {
  switch (action.type) {
    case 'toggleProfile':
      return {
        isProfileOpen: !state.isProfileOpen,
        isNotificationOpen: false
      };
    case 'toggleNotification':
      return {
        isProfileOpen: false,
        isNotificationOpen: !state.isNotificationOpen
      };
    case 'closeAll':
      return {
        isProfileOpen: false,
        isNotificationOpen: false
      };
    default:
      return state;
  }
}

const Navbar: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, { isProfileOpen: false, isNotificationOpen: false });
  const profileDropdownRef = useRef(null);
  const notificationDropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;

      if (
        (profileDropdownRef.current && !profileDropdownRef.current.contains(target)) ||
        (notificationDropdownRef.current && !notificationDropdownRef.current.contains(target))
      ) {
        dispatch({ type: 'closeAll' });
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const toggleProfileDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleProfile' });
  };

  const toggleNotificationDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleNotification' });
  };

  const closeDropdowns = () => {
    dispatch({ type: 'closeAll' });
  };

  const notificationItems = [
    { text: "New data received", time: "2 Days Ago" },
    { text: "New update available", time: "1 Day Ago" },
    { text: "Scheduled maintenance", time: "3 Days Ago" },
  ];

  const profileItems = [
    { label: "Profile", link: "#" },
    { label: "Settings", link: "#" },
    { label: "Logout", link: "#" }
  ];

  return (
    

      
    
  );
};

export default Navbar;

चरण 4: अपने ऐप में नेवबार को एकीकृत करें

अपनी App.tsx फ़ाइल खोलें और इसे अपने एप्लिकेशन लेआउट में शामिल करने के लिए नेवबार घटक आयात करें।

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from './components/Navbar';

const App: React.FC = () => {
  return (
    
      
      

        
Welcome to DC Dashboard!
        {/* Other components and content */}
      
    
  );
};

export default App;

चरण 5: टेलविंड सीएसएस के साथ स्टाइल करें

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

चरण 6: आवेदन का परीक्षण करें

अपना एप्लिकेशन चलाकर प्रारंभ करें:

bash
npm start

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

अक्सर पूछे जाने वाले प्रश्न

1. इस उदाहरण में यूज़रेड्यूसर हुक कैसे काम करता है?

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

2. यूज़रेफ का उपयोग क्यों करें?

हम ड्रॉपडाउन तत्वों को संदर्भित करने के लिए useRef का उपयोग करते हैं। इससे हम जाँच सकते हैं कि क्या इन तत्वों के बाहर कोई क्लिक घटना घटित हुई है। यदि ऐसा होता है, तो हम स्वच्छ उपयोगकर्ता अनुभव सुनिश्चित करते हुए ड्रॉपडाउन को बंद करने के लिए एक कार्रवाई भेजते हैं।

3. क्या मैं और ड्रॉपडाउन जोड़ सकता हूँ?

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

4. क्या इस कार्यान्वयन के लिए टेलविंड सीएसएस आवश्यक है?

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

निष्कर्ष

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