mantine hooks 🇮🇷

🇮🇷 دنیای جذاب Hookهای Mantıne: رفقای صمیمی توسعه رابط کاربری 🇮🇷
امروز میخوایم یه گپ دوستانه باهاتون داشته باشیم راجع به Hookهای Mantıne، یه سری ابزار فوقالعاده برای ساخت رابطهای کاربری جذاب و پویا توی React.

هوک ها یه سری تابع هستن که به شما امکان میدن بدون نیاز به نوشتن کد زیاد، از قابلیتهای مختلف کتابخانهها استفاده کنید. Mantıne هم یه سری Hook کاربردی داره که میتونن کار شما رو توی ساخت رابطهای کاربری خیلی راحتتر و سریعتر کنن.

در این مقاله به معرفی چند تا از مهمترین Hookهای Mantıne میپردازیم:

1. useMantineTheme:

این Hook به شما امکان دسترسی به تم فعلی Mantıne رو میده.

پراپها:

• defaultValue: تم پیشفرض (در صورتی که تم فعلی وجود نداشته باشه)

مثال:

JavaScript

import { useMantineTheme } from '@mantine/core';

const MyComponent = () => {
  const { colors } = useMantineTheme();

  return (
    <div style={{ backgroundColor: colors.primary }}>
      {/* ... */}
    </div>
  );
};

2. useDisclosure:

این Hook یه ابزار قدرتمند برای مدیریت نمایش و پنهان کردن عناصر رابط کاربری هستش.

پراپها:

• isOpen: وضعیت فعلی نمایش (باز یا بسته)
• onOpen: تابعی که هنگام باز شدن عنصر اجرا میشه
• onClose: تابعی که هنگام بسته شدن عنصر اجرا میشه

مثال:

JavaScript

import { useDisclosure } from '@mantine/core';

const MyComponent = () => {
  const { isOpen, onOpen,  } = useDisclosure();

  return (
    <>
      <button ={onOpen}>باز کردن</button>
      {isOpen && (
        <div style={{ position: 'absolute', top: 0, left: 0 }}>
          {/* ... محتوای مورد نظر شما */}
          <button ={}>بستن</button>
        </div>
      )}
    </>
  );
};

3. useModals:

این Hook یه ابزار کاربردی برای مدیریت Modalها (پنجرههای مجزا) در رابط کاربری شما هستش.

پراپها:

• opened: وضعیت فعلی Modal (باز یا بسته)
• onClose: تابعی که هنگام بسته شدن Modal اجرا میشه

مثال:

JavaScript

import { useModals } from '@mantine/core';

const MyComponent = () => {
  const { opened,  } = useModals();

  return (
    <>
      <button ={() => opened.show(<MyModal />)}>باز کردن Modal</button>
      <MyModal opened={opened} ={} />
    </>
  );
};

const MyModal = ({ opened,  }) => (
  <Modal opened={opened} ={}>
    {/* ... محتوای مورد نظر شما */}
  </Modal>
);

4. useHover:

این Hook به شما امکان میده که تشخیص بدید که آیا اشاره گر ماوس روی یه عنصر خاص قرار گرفته یا نه.

پراپها:

• isHovered: وضعیت فعلی Hover (روی عنصر یا نه)
• onHover: تابعی که هنگام Hover کردن روی عنصر اجرا میشه
• onLeave: تابعی که هنگام خارج شدن اشاره گر از روی عنصر اجرا میشه

مثال:

JavaScript

import { useHover } from '@mantine/core';

const MyComponent = () => {
  const { isHovered, onHover, onLeave } = useHover();

  return (
    <div
      style={{
        backgroundColor: isHovered ? 'lightgray' : 'white',
      }}
      ={onHover}
      ={onLeave}
    >
      {/* ... محتوای مورد نظر شما */}
    </div>
  );
};

5. useMediaQuery:

این Hook به شما امکان میده که بر اساس اندازه صفحه نمایش، کدهای مختلفی رو اجرا کنید.

پراپها:

• query: یه عبارت CSS Media Query
• matches: وضعیت فعلی Media Query (مطابقت داره یا نه)
• onChange: تابعی که هر بار وضعیت Media Query تغییر میکنه اجرا میشه

مثال:

JavaScript

import { useMediaQuery } from '@mantine/core';

const MyComponent = () => {
  const { matches } = useMediaQuery('(max-width: 768px)');

  return (
    <>
      {matches ? (
        <div style={{ flexDirection: 'column' }}>
          {/* محتوای برای نمایش در صفحات کوچک */}
        </div>
      ) : (
        <div style={{ flexDirection: 'row' }}>
          {/* محتوای برای نمایش در صفحات بزرگ */}
        </div>
      )}
    </>
  );
};

6. useTransition:

این Hook یه ابزار قدرتمند برای ایجاد انیمیشنهای روان و جذاب در رابط کاربری شما هستش.

پراپها:

• mounted: وضعیت فعلی نمایش (نمایش داده شده یا نه)
• children: محتوایی که میخواید انیمیشن بشه
• transition: یه شیء که نوع و زمان انیمیشن رو مشخص میکنه

مثال:

JavaScript

import { useTransition } from '@mantine/core';

const MyComponent = () => {
  const { mounted, children } = useTransition({ duration: 500 });

  return (
    <>
      {mounted && children}
    </>
  );
};

7. useClipboard:

این Hook به شما امکان میده که متن رو به حافظه موقت (Clipboard) کپی کنید.

پراپها:

• isCopied: وضعیت فعلی کپی شدن متن (کپی شده یا نه)
• value: متنی که میخواید کپی بشه
• onCopy: تابعی که هنگام کپی شدن متن اجرا میشه

مثال:

JavaScript

import { useClipboard } from '@mantine/core';

const MyComponent = () => {
  const { isCopied, value,  } = useClipboard('متن مورد نظر برای کپی');

  return (
    <>
      <button ={}>کپی کردن</button>
      {isCopied && <div>متن با موفقیت کپی شد!</div>}
    </>
  );
};

8. useHotkey:

این Hook به شما امکان میده که میانبرهای صفحه کلید رو برای انجام کارهای مختلف در رابط کاربری خودتون تعریف کنید.

پراپها:

• hotkey: میانبر صفحه کلید (مثل "Ctrl+Shift+C")
• handler: تابعی که هنگام فشردن میانبر صفحه کلید اجرا میشه

مثال:

JavaScript

import { useHotkey } from '@mantine/core';

const MyComponent = () => {
  const handleHotkey = () => {
    // ... کاری که میخواید انجام بشه
  };

  useHotkey('Ctrl+Shift+C', handleHotkey);

  return (
    <div>
      {/* ... محتوای مورد نظر شما */}
    </div>
  );
};

9. useBreakpoint:

این Hook به شما امکان میده که بر اساس نقطه شکست (Breakpoint) فعلی صفحه نمایش، کدهای مختلفی رو اجرا کنید.

پراپها:

• breakpoint: نقطه شکست مورد نظر (مثل "sm" یا "md")
• children: محتوایی که میخواید بر اساس نقطه شکست نمایش داده بشه
• render: تابعی که محتوای مورد نظر رو بر اساس نقطه شکست برمیگردونه

مثال:

JavaScript

import { useBreakpoint } from '@mantine/core';

const MyComponent = () => {
  const { breakpoint } = useBreakpoint();

  return (
    <>
      {breakpoint === 'sm' ? (
        <div style={{ flexDirection: 'column' }}>
          {/* محتوای برای نمایش در صفحات کوچک */}
        </div>
      ) : (
        <div style={{ flexDirection: 'row' }}>
          {/* محتوای برای نمایش در صفحات بزرگ */}
        </div>
      )}
    </>
  );
};

10. useScroll:

این Hook به شما امکان میده که موقعیت اسکرول فعلی یه عنصر رو ردیابی کنید.

پراپها:

• scrollPosition: موقعیت اسکرول فعلی (در پیکسل)
• onScroll: تابعی که

مثال:

JavaScript

import { useScroll } from '@mantine/core';

const MyComponent = () => {
  const { scrollPosition,  } = useScroll();

  return (
    <div style={{ height: 200, overflow: 'auto' }} ={}>
      {/* ... محتوای مورد نظر شما */}
    </div>
  );
};

نکته:

• برای استفاده از Hookهای Mantıne، باید کتابخانه @mantine/core رو نصب کنید.
• میتونید از سایر Hookهای Mantıne برای انجام کارهای مختلف در رابطهای کاربری خودتون استفاده کنید.

امیدواریم این مقاله برای شما مفید بوده باشه.

#Mantıne #React #Hook #برنامهنویسی