در سال‌های اخیر React محبوب‌تر از پیش شده است و در نتیجه، پیدایش کتابخانه‌های بیش‌تر برای آن نیز، امری طبیعی است که کارها را برای ما ساده‌تر می‌کنند و علاوه بر این نیز امکانات جدیدی را در اختیار توسعه‌دهندگان قرار می‌دهند.
در این مقاله قصد دارم ۵ کتابخانه‌ای را به شما معرفی کنم که می‌توانند برایتان بسیار مفید و کاربردی باشند و شناخت آن‌ها واجب است.
1- React-portal
پورتال‌ها در ری‌اکت هرچند کاربردهای بسیار زیادی ندارند، اما مورد شناخته‌شده‌ای هستند. طبق داکیومنت ری‌اکت، پورتال‌ها این‌گونه توصیف شده‌اند:
« پورتال‌ها روشی عالی برای رندر کردن فرزندان یک المنت در بیرون آن گره (node) DOM و خارج از سلسه مراتب پدر و فرزندی کامپوننت‌ها است.»
معمولا تمام اپلیکیشن‌های ری‌اکت ما درون یک نود DOM اچ تی ام ال رندر می‌شوند؛ اما ما با استفاده از پورتال‌ها می‌توانیم گره‌‌های بیش‌تری را تعریف کنیم تا بتوانیم در نهایت به بخش‌های مختلف اپ خود (به مانند کامپوننتهای مجزا از هم) دسترسی داشته باشیم.
با توجه به داکیومنت رسمی ری اکت، به نظر می‌رسد که استفاده از پورتال‌ها کار پیچیده و سختی باشد؛ نتیجتا کتابخانهی react-portal برای به‌وجود آوردن روشی ساده‌تر منتشر شده است.
روش کار این کتابخانه نیز در مثال زیر به اختصار آورده شده است:
import { Portal } from ‘react-portal’
<Portal node={document && document.getElementById(‘portal’)}>
<p>This is portaled into the portal div!</p>
</Portal>همان‌طور که در قطعه کد بالا مشاهده می‌کنید، تنها باید با استفاده از انتخاب‌گرهای معمول جاوااسکریپت مثل getElementById و یا querySelector، المنت مورد نظر HTML ای خود را در کانتینر پورتال خود، مورد هدف قرار دهید تا پورتال بر روی آن اعمال شود.
بدین ترتیب در فایل public/index.html خود چیزی شبیه به کد HTML زیر را باید داشته باشید:
<div id=”root”></div>
<div id=”portal”></div>البته که المنت ریشه‌ای (root element) که حضورش در تمامی اپ‌های ری اکت واجب است را می‌توانید در این مثال نیز مشاهده کنید؛ اما علاوه بر آن المنت پورتال را نیز در خارج آن المنت می‌بینید.
نکته: شما می‌توانید پورتال خود را نیز به مانند دیگر کامپوننتهای ری اکت، طبق شرایط مورد نظرتان، پنهان کنید و از رندر شدن آن جلوگیری کنید.
{this.state.show ? (
<Portal node={document && document.getElementById(‘portal’)}>
<p>Portal content</p>
</Portal>2- react-toastify
محیا کردن داده‌ها و اطلاعات پویا و دینامیک به کاربران یک وب‌سایت، امری حیاتی در وب‌اپ‌های مدرن و جدید می‌باشد. متاسفانه فانکشن alert() روش خوبی برای انجام این کار نیست و احتمالا شما نیز با این نظر من موافق هستید.
پس می‌توانید از این پس از react-toastify استفاده کنید که کتابخانه‌ای کوچک اما با قابلیت‌های شخصی سازی و کاستومایز فراوان است. شما می‌توانید با استفاده از این کتابخانه toast های جذاب و زیبایی را در مرورگر کاربر برای او به نمایش درآورید. پیش از ورود به شرح نحوه‌ی استفاده از این ابزار، بیایید نگاهی به دموهای رسمی این کتابخانه بیندازیم.
روش استفاده‌ی مرحله به مرحله از این کتابخانه در پروژه‌های ری اکتی:
- ایمپورت کردن کتابخانه و css های مورد نیاز آن.
- سپس می‌توانیم تنظیمات آن را شخصی‌سازی کنیم.
- با استفاده از فانکشن toast() می‌توانیم آن را ظاهر کنیم.
قابلیت‌های جذاب دیگر:
شما می‌توانید با استفاده از قطعه کدی مانند زیر از JSX درون toast خود استفاده کنید:
const notify = () => toast(<h1>Big Text</h1>)مقدار autoClose می‌تواند با قرار گرفتن بر روی false از بسته شدن خودکار toast پس از مدت زمانی، ممانعت کند.
3- react-contextmenu
تصور کردن یک نرم افزار واقعی بدون context menu ها بسیار سخت است اما در وب‌سایت‌ها اوضاع متفاوت است. جدیدا اوضاع متفاوت شده است؛ وب اپ‌های مدرن بسیار شبییه به اپلیکیشن‌های دسکتاپ شده‌اند که سعی در ارائه عملکردی کارآمد و به خوبی آن‌ها را نیز دارند. در همین راستا از ویژگی‌های نرم‌افزارها نیز به خوبی در حال بهره‌بردن هستند؛ ویژگی‌ها و قابلیت‌هایی که چند سال قبل هیچ‌کس انتظار آن ها را از وب‌سایت‌ها نداشته است.
یکی از این قابلیت‌های جذاب که راه خود را به وب اپ‌ها باز کرده، کنترل بر روی کلیک راست (right-click) کاربران در اپ شماست که به تازگی متداولا مورد استفاده قرار می‌گیرد.
به شخصه این قابلیت را تنها در google sheets و iCloud مشاهده کرده‌ام و استفاده از آن‌ها را بدون کلیک راست غیر قابل تصور می‌دانم؛ چرا که قابلیت‌های فراوانی را به من می‌دهد.
شما هم از این پس می‌توانید برای استفاده از این نوع منوها در اپلیکیشن ری اکت خود، از کتابخانهی مربوطه استفاده کنید.
بیایید کمی وارد نحوه‌ی استفاده از این ابزار بروز و جذاب شویم:
<ContextMenuTrigger> کامپوننتی خواهد بود که کاربر با کلیک راست کردن بر روی آن، منو را فعال خواهد کرد. خود منو نیز درون <ContextMenu> تعریف می‌شود. برای هر آیتم نیاز به یک کامپوننت <MenuItem> است که می‌توان با تعریف کردن رویداد (event) onClick بر آن‌ها، با کاربر به تعامل پرداخت.
4- react-lazy-load-image-component
نمایش دادن تصاویر متعدد در یک وب‌سایت، می‌تواند زمان زیادی را از کاربر تلف کند. اغلب تصاویر آماده به لود که به شکل ناگهانی ظاهر می‌شوند، تجربه‌ی خوبی برای کاربران به همراه ندارند و ما باید از این موارد دوری کنیم.
یک کتابخانهی خیلی خوب برای بهینه‌سازی تمام موارد وب‌سایت شما حول محور تصاویر، react-lazy-load-image-component است که می‌تواند رضایت کاربرانتان نسبت به وب‌سایتتان را به شکلی چشم‌گیر افزایش دهد. از قابلیت‌های این کتابخانه می‌توان به محو (blur) کردن تصاویر پیش از لود شدن آن‌ها و اضافه کردن lazy-load به تصاویر صفحاتتان اشاره کرد.
در این صفحه می‌توانید دموی آنلاینی از کاربردهای این کتابخانه را مشاهده کنید.
5- React-onclickoutside
یک قانون مهم در طراحی رابط کاربری این است که تا جایی که می‌توانید ورودی‌های کاربرانتان را ارزیابی و بررسی کنید و نسبت به آن‌ها واکنش و تعامل نشان دهید. این اصل یک موردی است که برای همه واضح است ولی پیاده‌سازی آن به عنوان کد، ممکن است دشوار باشد.
اگر بخواهیم در این مورد یک مثال بیاوریم، می‌توان به یک منویی که توسط کاربر در وب اپ ما باز شده اشاره کرد. ۹۰ درصد کاربران برای بستن این منو، به مناطق به اصطلاح مرده‌ی صفحه، کلیک خواهند کرد و انتظار بسته شدن منو را دارند. این اتفاقی است که در بیش‌تر وب‌سایت‌های حرفه ای امروزه رخ می‌دهد و کاربر برای بستن منویی که باز کرده، مجبور به کلیلک بر روی دکمه‌ی آن منو نیست.
شما می‌توانید برای اضافه کردن این قابلیت واجب به وب اپ هایتان، از کتابخانهی react-onclickoutside استفاده کنید که به شما امکان مدیریت کردن رویدادهای کلیکی خارج از یک المنت را می‌دهد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید