خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد حالت تاریک در React بدون استفاده از React Context

ارشیا یوسفی ادیب ۲۰ اسفند, ۱۴۰۲ 4 min read

تنظیم حالت تاریک برای کل برنامه شما جهانی است و بسیاری از اجزا ممکن است نیاز به دسترسی به آن داشته باشند. آیا راهی تمیزتر از زمینه برای مدیریت آن داده ها وجود دارد؟

برای برنامه‌های کاربردی رایج شده است که تنظیماتی داشته باشند که به شما امکان می‌دهد بین حالت‌های تاریک و روشن جابجا شوید. شاید به دلیل محبوبیت رابط‌های کاربری تاریک باشد، شاید به این دلیل است که برنامه‌ها به تدریج قابل تنظیم‌تر می‌شوند.

React context راهی آسان برای به اشتراک گذاری داده ها در سطح جهانی است، اما می تواند استفاده مجدد از اجزا را دشوارتر کند. به عنوان یک جایگزین، می توانید یک جزء دکمه حالت تاریک بسازید که از useEffect و useState به جای متن استفاده می کند. یک ویژگی داده را روی عنصر بدنه تغییر می دهد که سبک های CSS می توانند هدف قرار دهند.

آنچه شما نیاز خواهید داشت

برای دنبال کردن این آموزش، به موارد زیر نیاز دارید:

  • نسخه اخیر Node روی دستگاه شما نصب شده است.
  • درک اولیه از قلاب های React و React.
  • یک پروژه شروع React. فقط یک برنامه React ایجاد کنید و آماده شروع کار هستید.

یک کامپوننت دکمه ایجاد کنید

مولفه دکمه مسئول تغییر موضوع از تیره به روشن خواهد بود. در یک برنامه واقعی، این دکمه ممکن است بخشی از مولفه Navbar باشد.

در پوشه src یک فایل جدید به نام Button.js ایجاد کنید و کد زیر را اضافه کنید.

import { useState } from 'react'
 
export default function Button() {
    const [theme, settheme] = useState("dark")
 
    const handleToggle = () => {
 const newTheme = theme === "light" ? "dark" : "light"
 settheme(newTheme)
    }

    return (
        <>
            <button className="themeBtn" onClick={handleToggle}>
                {theme=== "light" ? <span>dark</span> : <span>light</span>}
            </button>
        </>
    )
}

ابتدا قلاب useState() را از React وارد کنید. از آن برای پیگیری موضوع فعلی استفاده خواهید کرد.

مطلب مرتبط:   همه چیزهایی که برای شروع نوشتن باید بدانید برو

در کامپوننت Button، حالت را به تاریک مقداردهی کنید. تابع handleToggle () از عملکرد تعویض مراقبت می کند. با هر بار کلیک روی دکمه اجرا می شود.

این مؤلفه همچنین هنگام تغییر موضوع، متن دکمه را تغییر می دهد.

برای نمایش مولفه Button، آن را در App.js وارد کنید.

import Button from './Button';

function App() {
    return (
        <div>
            <Button/>
        </div>
    );
}
 
export default App;

استایل های CSS را ایجاد کنید

در حال حاضر، کلیک کردن روی دکمه، رابط کاربری برنامه React را تغییر نمی دهد. برای آن، ابتدا باید استایل های CSS را برای حالت تاریک و روشن ایجاد کنید.

در App.css موارد زیر را اضافه کنید.

body {
  --color-text-primary: #131616;
  --color-text-secondary: #ff6b00;
  --color-bg-primary: #E6EDEE;
  --color-bg-secondary: #7d86881c;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background 0.25s ease-in-out;
}

body[data-theme="light"] {
  --color-text-primary: #131616;
  --color-bg-primary: #E6EDEE;
}

body[data-theme="dark"] {
  --color-text-primary: #F2F5F7;
  --color-bg-primary: #0E141B;
}

در اینجا، شما سبک های عنصر بدنه را با استفاده از ویژگی های داده تعریف می کنید. ویژگی داده تم روشن و داده داده تم تیره وجود دارد. هر کدام از آنها دارای متغیرهای CSS با رنگ های مختلف هستند. استفاده از ویژگی های داده CSS به شما این امکان را می دهد که سبک ها را با توجه به داده ها تغییر دهید. اگر کاربر یک تم تیره انتخاب کند، می‌توانید ویژگی داده بدن را روی تیره تنظیم کنید و رابط کاربری تغییر خواهد کرد.

همچنین می‌توانید سبک‌های عنصر دکمه را تغییر دهید تا با موضوع تغییر کند.

.themeBtn {
  padding: 10px;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-text-primary);
  cursor: pointer;
}

تغییر مولفه دکمه برای تغییر سبک

برای جابجایی استایل های تعریف شده در فایل CSS، باید داده ها را در عنصر body در تابع handleToggle () تنظیم کنید.

مطلب مرتبط:   نحوه اضافه کردن اسکرول بی نهایت در React.js

در Button.js، handleToggle() را به این صورت تغییر دهید:

const handleToggle = () => {
    const newTheme = theme ==="light" ? "dark" : "light"
    settheme(newTheme)
    document.body.dataset.theme = theme
}

اگر روی دکمه کلیک کنید، پس‌زمینه باید از تیره به روشن یا روشن به تیره تغییر کند. با این حال، اگر صفحه را به‌روزرسانی کنید، موضوع بازنشانی می‌شود. برای تداوم تنظیمات طرح زمینه، اولویت تم را در حافظه محلی ذخیره کنید.

تداوم اولویت کاربر در فضای ذخیره‌سازی محلی

به محض اینکه مولفه Button رندر شد، باید اولویت کاربر را بازیابی کنید. قلاب useEffect() برای این کار عالی است زیرا بعد از هر رندر اجرا می شود.

قبل از بازیابی تم از حافظه محلی، ابتدا باید آن را ذخیره کنید.

یک تابع جدید به نام storeUserPreference() در Button.js ایجاد کنید.

const storeUserSetPreference = (pref) => {
    localStorage.setItem("theme", pref);
};

این تابع اولویت کاربر را به عنوان آرگومان دریافت می کند و آن را به عنوان یک آیتم به نام theme ذخیره می کند.

هر بار که کاربر موضوع را تغییر می دهد، این تابع را فراخوانی می کنید. بنابراین، تابع handleToggle() را به شکل زیر تغییر دهید:

const handleToggle = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    settheme(newTheme)
    storeUserSetPreference(newTheme)
    document.body.dataset.theme = theme
}

تابع زیر موضوع را از حافظه محلی بازیابی می کند:

const getUserSetPreference = () => {
    return localStorage.getItem("theme");
};

شما از آن در قلاب useEffect استفاده خواهید کرد، بنابراین هر بار که مؤلفه رندر می‌شود، اولویت را از حافظه محلی برای به‌روزرسانی موضوع دریافت می‌کند.

useEffect(() => {
    const userSetPreference = getUserSetPreference();
 
    if (userSetPreference) {
        settheme(userSetPreference)
    }

    document.body.dataset.theme = theme
}, [theme])

دریافت اولویت کاربر از تنظیمات مرورگر

برای تجربه کاربری حتی بهتر، می‌توانید از ویژگی ترجیحی رنگ‌بندی CSS برای تنظیم موضوع استفاده کنید. این باید منعکس کننده تنظیمات سیستم کاربر باشد که می تواند از طریق سیستم عامل یا مرورگر خود کنترل کند. تنظیم می تواند روشن یا تاریک باشد. در برنامه خود، باید بلافاصله پس از بارگیری مؤلفه دکمه، این تنظیم را بررسی کنید. این به معنای پیاده سازی این قابلیت در قلاب useEffect() است.

مطلب مرتبط:   Beyond React: 7 روش برای ادغام React با سایر فناوری ها

ابتدا تابعی ایجاد کنید که اولویت کاربر را بازیابی کند.

در Button.js موارد زیر را اضافه کنید.

const getMediaQueryPreference = () => {
    const mediaQuery = "(prefers-color-scheme: dark)";
    const mql = window.matchMedia(mediaQuery);
    const hasPreference = typeof mql.matches === "boolean";
    
    if (hasPreference) {
        return mql.matches ? "dark" : "light";
    }
};

در مرحله بعد، قلاب useEffect() را تغییر دهید تا ترجیحات پرس و جو رسانه را بازیابی کند و اگر تمی در حافظه محلی تنظیم نشده باشد از آن استفاده کنید.

useEffect(() => {
    const userSetPreference = getUserSetPreference();
    const mediaQueryPreference = getMediaQueryPreference();
 
    if (userSetPreference) {
        settheme(userSetPreference)
    } else {
        settheme(mediaQueryPreference)
    }
 
    document.body.dataset.theme = theme
}, [theme])

اگر برنامه خود را مجددا راه اندازی کنید، موضوع باید با تنظیمات سیستم شما مطابقت داشته باشد.

استفاده از React Context برای تغییر حالت تاریک

می‌توانید از ویژگی‌های داده، CSS و قلاب‌های React برای تغییر موضوع یک برنامه React استفاده کنید.

یکی دیگر از رویکردهای مدیریت حالت تاریک در React استفاده از Context API است. React context به شما این امکان را می‌دهد تا داده‌ها را در بین اجزاء بدون نیاز به انتقال آن از طریق props به اشتراک بگذارید. هنگامی که از آن برای تغییر تم ها استفاده می کنید، یک زمینه تم ایجاد می کنید که می توانید در سراسر برنامه به آن دسترسی داشته باشید. سپس می توانید از مقدار تم برای اعمال سبک های منطبق استفاده کنید.

در حالی که این روش کار می کند، استفاده از ویژگی های داده CSS ساده تر است.

Tags: