ساخت هشدارهای سفارشی در برنامه React خود با Chakra UI

هشدارها پیام‌هایی هستند که در یک وب‌سایت/برنامه وب نمایش داده می‌شوند تا اطلاعات مهمی را به کاربر منتقل کنند. آن‌ها نقش حیاتی در برنامه‌های وب ایفا می‌کنند. راه‌های متعددی برای ایجاد هشدارها در ری‌اکت وجود دارد؛ چاکرا UI فرآیند را آسان و کارآمد می‌سازد.

هشدارها پیام‌هایی هستند که در یک وب‌سایت/وب‌اپلیکیشن نمایش داده می‌شوند تا اطلاعات مهم را به کاربر منتقل کنند. آن‌ها نقش حیاتی در برنامه‌های وب ایفا می‌کنند. روش‌های متعددی برای ایجاد هشدار در ری‌اکت وجود دارد؛ Chakra UI فرآیند را آسان و کارآمد می‌کند.

Chakra UI یک کتابخانهٔ محبوب از کامپوننت‌ها برای ری‌اکت است که مجموعه‌ای از کامپوننت‌های قابل سفارشی‌سازی و دسترس‌پذیر UI را فراهم می‌کند.

نصب Chakra UI

برای استفاده از کتابخانه Chakra UI، یکی از کتابخانه‌های متعدد کامپوننت ری‌اکت، ابتدا باید آن را نصب کنید. می‌توانید با اجرای دستور ترمینال زیر در پوشهٔ پروژه node.js خود آن را نصب کنید:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

به‌طور جایگزین می‌توانید Chakra UI را با Yarn نصب کنید. برای این کار، دستور زیر را اجرا کنید:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

راه‌اندازی Chakra UI

پس از نصب Chakra UI، باید آن را در برنامهٔ خود قابل استفاده کنید. برای این کار، نیاز است که کامپوننت ChakraProvider را تنظیم کنید.

کامپوننت ChakraProvider یک کامپوننت سطح بالاست که کتابخانه Chakra UI فراهم می‌کند. این کامپوننت تمام برنامه را در بر می‌گیرد و تم و زمینه استایل را به تمام کامپوننت‌های آن ارائه می‌دهد.

برای تنظیم کامپوننت ChakraProvider، آن را از @chakra-ui/react ایمپورت کنید:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

کامپوننت ChakraProvider از یک prop به نام theme پشتیبانی می‌کند. ارسال prop theme به کامپوننت ChakraProvider تضمین می‌کند که تمام کامپوننت‌های Chakra UI در برنامه بتوانند به تم و زمینه استایل ارائه شده دسترسی پیدا کنند. این prop اختیاری است؛ اگر آن را ارسال نکنید، Chakra UI از تم پیش‌فرض استفاده خواهد کرد.

ایجاد هشدار سفارشی با استفاده از کامپوننت‌های Alert

Chakra UI چهار کامپوننت ارائه می‌دهد که می‌توانید با آن‌ها هشدار سفارشی بسازید: Alert، AlertIcon، AlertTitle، و AlertDescription.

برای ساخت پیام هشدار خود، این کامپوننت‌ها را از کتابخانه Chakra UI ایمپورت کرده و به شکل زیر استفاده کنید:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'

function App() {
  return (
    <div>
      <Alert status='success'>
        <AlertIcon />
        <AlertTitle>Welcome!!!</AlertTitle>
        <AlertDescription>Its nice to have you here</AlertDescription>
      </Alert>
    </div>
  )
}

export default App

پس از ایمپورت کردن کامپوننت‌ها، کامپوننت Alert یک پیام به کاربر نمایش می‌دهد. این کامپوننت دارای prop وضعیت (status) با مقدار «success» است که نشان می‌دهد پیام، پیام موفقیت است.

سه وضعیت دیگر نیز وجود دارد: «info»، «error» و «warning». طرح رنگ و آیکونی که هشدار استفاده می‌کند بسته به وضعیت پیام متفاوت خواهد بود.

کامپوننت Alert شامل سه فرزند است: AlertIcon، AlertTitle و AlertDescription. کامپوننت AlertIcon یک آیکون کوچک کنار پیام نمایش می‌دهد، AlertTitle پیام اصلی را نشان می‌دهد، و AlertDescription توصیف دقیق‌تری از پیام ارائه می‌کند.

بلوک کد قبلی یک هشدار به این شکل تولید می‌کند:

سفارشی‌سازی پیام‌های هشدار با استفاده از prop Variant

برای سفارشی‌سازی ظاهر پیام هشدار، از prop variant کامپوننت Alert استفاده کنید. این prop ظاهر بصری پیام هشدار را تعریف می‌کند و بر پایهٔ مقداری که می‌گذارید، طرح رنگ، آیکون و وزن قلم پیام را تعیین می‌کند.

prop variant مقادیر رشته‌ای متعددی مانند subtle، solid، left‑accent، top‑accent، right‑accent و bottom‑accent را می‌پذیرد. هر مقدار نمایانگر یک سبک بصری متفاوت برای پیام هشدار است.

در اینجا نمونه‌ای از چهار کامپوننت هشدار با variantهای مختلف آورده شده است:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'

function App() {
  return (
    <div>
      <Flex justify='center' gap='3' direction='column' mt='4'>
          <Alert status='success' variant='solid'>
              <AlertIcon />
              <AlertTitle>Welcome!!!</AlertTitle>
              <AlertDescription>Its nice to have you here</AlertDescription>
          </Alert>

          <Alert status='success' variant='subtle'>
              <AlertIcon />
              <AlertTitle>Welcome!!!</AlertTitle>
              <AlertDescription>Its nice to have you here</AlertDescription>
          </Alert>

          <Alert status='success' variant='top-accent'>
              <AlertIcon />
              <AlertTitle>Welcome!!!</AlertTitle>
              <AlertDescription>Its nice to have you here</AlertDescription>
          </Alert>

          <Alert status='success' variant='left-accent'>
              <AlertIcon />
              <AlertTitle>Welcome!!!</AlertTitle>
              <AlertDescription>Its nice to have you here</AlertDescription>
          </Alert>
      </Flex>
    </div>
  )
}

export default App

اجرای این بلوک کد یک هشدار سفارشی به این شکل نمایش می‌دهد:

سفارشی‌سازی پیام‌های هشدار با استفاده از prop className

به‌جای حفظ ظاهر پیش‌فرض پیام‌های هشدار، می‌توانید با استفاده از prop className آن را سفارشی کنید. با prop className یک کلاس CSS تعریف کرده و سبک سفارشی خود را به پیام هشدار اعمال می‌کنید.

به‌عنوان مثال:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'

function App() {
  return (
    <div>
      <Alert status='success' className='alert'>
        <AlertIcon />
        <AlertTitle>Welcome!!!</AlertTitle>
        <AlertDescription>Its nice to have you here</AlertDescription>
      </Alert>
    </div>
  )
}

export default App;

در این مثال، کامپوننت هشدار دارای یک کلاس CSS به نام «alert» است. پس از تعریف این کلاس، می‌توانید سبک‌های خود را در فایل CSS تعریف کنید.

به این شکل:

.alert {
  color: red;
  font-family: cursive;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

کد بالا سبک‌های CSS را بر روی کامپوننت هشدار اعمال می‌کند. اگر با propهای استایل Chakra UI آشنا هستید، بهتر است برای استایل دادن به پیام‌های هشدار از آن‌ها استفاده کنید تا از prop className.

پس از اعمال سبک‌های CSS فوق، کامپوننت هشدار همان‌طور که در تصویر زیر مشاهده می‌شود، نمایش داده می‌شود:

راه‌اندازی پیام‌های هشدار در پاسخ به رویدادهای کاربر

شما یک کامپوننت هشدار ایجاد کرده‌اید که به‌صورت مداوم پیام هشدار را روی صفحه نمایش می‌دهد. اما برای ارتقای تجربه کاربری، می‌توانید پیام هشدار را در پاسخ به رویدادهای خاصی که کاربر آغاز می‌کند، با استفاده از JavaScript event Listeners فعال کنید. این رویدادها می‌توانند شامل کلیک بر یک دکمه، ارسال فرم یا بروز خطا باشند.

برای فعال‌سازی پیام هشدار خود در پاسخ به رویدادها، از وضعیت (state) ری‌اکت و prop display کامپوننت‌های Chakra UI استفاده کنید.

به‌عنوان مثال:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} from '@chakra-ui/react'

function App() {
  const [display, setDisplay] = React.useState('none');

  function notify() {
    setDisplay('flex');
  }

  function close() {
    setDisplay('none');
  }

  return (
    <div className="app">
      <Alert status='success' display={display} variant='solid'>
        <AlertIcon />
        <AlertTitle>Welcome!!!</AlertTitle>
        <AlertDescription>Its nice to have you here</AlertDescription>
        <CloseButton position='absolute' top='6px' right='6px' onClick={close}/>
      </Alert>

      <Button onClick={notify} mt='4'>Click Me</Button>
    </div>
  )
}

export default App

این بلوک کد وضعیت نمایش اطلاعیه را با هوک useState مدیریت می‌کند. وضعیت اولیه نمایش اطلاعیه روی «none» تنظیم می‌شود که باعث مخفی شدن آن می‌شود.

هنگامی که کاربر روی Button کلیک می‌کند، تابع notify فراخوانی می‌شود. این تابع مقدار وضعیت display را از «none» به «flex» تغییر می‌دهد و اطلاعیه را قابل مشاهده می‌کند.

وقتی کاربر روی closeButton کلیک می‌کند، تابع close فراخوانی می‌شود. این تابع وضعیت display را به «none» برمی‌گرداند که اطلاعیه را مخفی می‌کند.

اکنون می‌توانید هشدارهای قابل سفارشی‌سازی ایجاد کنید

اکنون می‌دانید چگونه یک هشدار سفارشی را در برنامهٔ ری‌اکت خود با استفاده از Chakra UI ایجاد کنید. با Chakra UI، ساخت هشدارهای سفارشی در ری‌اکت آسان و شهودی است و به ما امکان می‌دهد اطلاعات واضح و مختصر را به کاربران ارائه دهیم. Chakra UI کامپوننت‌های UI دیگری نیز ارائه می‌کند که قابل سفارشی‌سازی و دسترس‌پذیر هستند تا به شما در ساخت برنامه‌های عالی ری‌اکت کمک کنند.

منبع مقاله