थीम अवस्था के लिए React Context

सबसे पहले, अपने कॉन्टेक्स्ट के आकार से मेल खाने वाले डिफ़ॉल्ट मान के साथ createContext() को कॉल करें: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} })। डिफ़ॉल्ट मान का उपयोग केवल तब होता है जब कोई कंपोनेंट किसी पैरेंट प्रदाता के बिना कॉन्टेक्स्ट पढ़ता है, जिससे अलग-अलग कंपोनेंट के परीक्षण में सहायता मिलती है।

ThemeProvider कंपोनेंट एक ऐसा रैपर है जिसमें थीम से जुड़ा पूरा तर्क रहता है। यह माउंट होने पर सिस्टम की पसंद पढ़ता है, theme स्थिति संभालता है, toggleTheme फ़ंक्शन उपलब्ध कराता है और चाइल्ड कंपोनेंट्स को ThemeContext.Provider value={{ theme, toggleTheme }} में लपेटता है। इसे अपने कंपोनेंट ट्री के ऊपरी हिस्से के पास रखें।

कोई भी अधीनस्थ कंपोनेंट useContext(ThemeContext) को कॉल करके थीम तक पहुँच सकता है। इससे वर्तमान कॉन्टेक्स्ट मान मिलता है, जिसमें theme और toggleTheme शामिल हैं। थीम बदलने पर कंपोनेंट अपने-आप फिर से रेंडर होता है, इसलिए प्रॉप्स को कई स्तरों से आगे भेजे बिना वह हमेशा समन्वयित रहता है।

CSS चर मूल एलिमेंट पर मौजूद data-theme विशेषता पर निर्भर करते हैं। ThemeProvider में ऐसा useEffect जोड़ें जो theme बदलने पर हर बार चले: document.documentElement.setAttribute('data-theme', theme)। इससे रिएक्ट की स्थिति और CSS परत के बीच सहज रूप से संबंध बनता है।

पेज फिर से लोड होने पर उपयोगकर्ता की पसंद बनाए रखने के लिए, थीम बदलने पर हर बार localStorage में लिखें: localStorage.setItem('theme', theme)। आप इस तर्क को एक useLocalStorage कस्टम हुक में समाहित कर सकते हैं, जो स्थिति जैसी जोड़ी लौटाता है और हर अपडेट को अपने-आप सहेजता है।

थीम की स्थिति शुरू करते समय पहले localStorage से पढ़ें: localStorage.getItem('theme')। यदि कोई सहेजा हुआ मान मौजूद न हो, तो window.matchMedia('(prefers-color-scheme: dark)').matches के माध्यम से सिस्टम की पसंद अपनाएँ। यह शुरुआत माउंट होने पर केवल एक बार होती है।

ऊँची से नीची प्राथमिकता का सही क्रम यह है: localStorage में सहेजी गई उपयोगकर्ता की पसंद, फिर सिस्टम OS की पसंद और अंत में कोड में तय डिफ़ॉल्ट मान, जो आम तौर पर light होता है। यह क्रम सुनिश्चित करता है कि अंतिम नियंत्रण हमेशा उपयोगकर्ता के पास रहे और यदि उसने ऐप में स्पष्ट रूप से कोई विकल्प नहीं चुना है, तो उसकी OS सेटिंग का भी सम्मान हो।

हर कंपोनेंट में सीधे useContext(ThemeContext) को कॉल करने से कार्यान्वयन संबंधी विवरण सामने आ जाते हैं। इसके बजाय, एक useTheme हुक निर्यात करें: function useTheme() { return useContext(ThemeContext); }। अब कंपोनेंट useTheme आयात करके उसे कॉल कर सकते हैं, बिना यह जाने कि अंदरूनी कॉन्टेक्स्ट कैसे काम करता है।

toggleTheme फ़ंक्शन light और dark के बीच बदलता है: setTheme(prev => prev === 'light' ? 'dark' : 'light')। इसे कॉन्टेक्स्ट के माध्यम से उपलब्ध कराएँ, ताकि ट्री में कहीं भी मौजूद कोई बटन इसे चला सके। स्थिति एक ही स्थान पर रहती है और टॉगल तर्क हर जगह साझा होता है।

ThemeProvider के हर रेंडर पर कॉन्टेक्स्ट मान वाली वस्तु फिर से बनाई जाती है। सभी कॉन्टेक्स्ट का उपयोग करने वाले कंपोनेंट्स के अनावश्यक री-रेंडर रोकने के लिए इसे useMemo में लपेटें: const value = useMemo(() => ({ theme, toggleTheme }), [theme])। कॉन्टेक्स्ट प्रदाताओं के लिए यह प्रदर्शन सुधारने का एक सामान्य तरीका है।

परीक्षणों में, रेंडर किए गए कंपोनेंट्स को ऐसी कस्टम renderWithTheme उपयोगिता में लपेटें जो ThemeProvider को रैपर के रूप में उपयोग करती हो। अलग-अलग परीक्षण के लिए आप एक सरल नकली कॉन्टेक्स्ट भी बना सकते हैं: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}। इससे आप कंपोनेंट्स का किसी विशिष्ट थीम स्थिति में परीक्षण कर सकते हैं।

एक ThemeContext और ऐसा ThemeProvider बनाएँ जो थीम की स्थिति संभाले, उसे localStorage के साथ समन्वयित करे और दस्तावेज़ पर data-theme सेट करे। साफ़-सुथरे उपयोग के लिए useTheme सुविधाजनक हुक अपनाएँ। प्राथमिकता का क्रम है: सहेजी गई पसंद, फिर सिस्टम की पसंद और अंत में डिफ़ॉल्ट मान।