React Arborist: کاملترین کتابخانه درختی برای ریاکت
ریاکت
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
اگه تا حالا خواستی توی پروژهی ریاکتت یه ساختار درختی بسازی — مثل همون sidebar فایلهای VSCode یا پنل Layers فیگما — احتمالاً فهمیدی که از صفر ساختنش چقدر دردسر داره. React Arborist دقیقاً برای همین دردسرها اومده.
این کتابخانه یه راهحل کامل برای ساخت tree view توی اکوسیستم ریاکته. از Mac Finder گرفته تا Windows Explorer و Sketch/Figma layers panel، هر چیزی که ساختار سلسلهمراتبی داره رو میشه باهاش پیاده کرد. حتی یه نمونهی کلون جیمیل sidebar هم باهاش ساخته شده!
یکی از جالبترین ویژگیهاش اینه که میتونی بین دو حالت controlled و uncontrolled انتخاب کنی. اگه بخوای همه چیز رو خودت مدیریت کنی، از prop مربوطه استفاده میکنی و callbackهای create، rename، move و delete رو خودت هندل میکنی. اگه هم نخوای کار اضافه داشته باشی، حالت uncontrolled همه چیز رو داخلی مدیریت میکنه.
از نظر امکانات، این کتابخانه واقعاً کامله: درگاندراپ برای جابجایی آیتمها، باز و بسته کردن پوشهها، تغییر نام مستقیم روی نود، رندرینگ مجازیسازیشده برای عملکرد بهتر با دادههای حجیم، استایلدهی کاملاً سفارشی، ناوبری با کیبورد، و پشتیبانی از aria attributes برای دسترسپذیری.
یه ویژگی خیلی کاربردی دیگهش tree filtering هست. وقتی یه searchTerm بدی، فقط نودهایی که match میکنن نشون داده میشن. اگه یه فرزند match بده، تمام والدینش هم نمایش داده میشن. میتونی تابع searchMatch رو هم خودت تعریف کنی.
همچنین میشه selection رو با بقیهی برنامه sync کرد. مثلاً وقتی کاربر از جای دیگهای یه آیتم رو انتخاب میکنه، درخت بهطور خودکار اون نود رو select کرده و بهش اسکرول میکنه. این خیلی توی اپهایی که چند بخش مختلف با هم تعامل دارن به درد میخوره.
API کتابخانه هم خیلی کامله. از Tree API instance گرفته تا Node API که یه سری property مثل isRoot، isLeaf، isOpen، isEditing و غیره داره، همه چیز مستند شده. علاوه بر اینا، componentهای سفارشیسازیپذیر برای Row، Node، DragPreview و Cursor هم داری که میتونی کاملاً جایگزینشون کنی.
نکات کلیدی:
- مناسب برای ساخت نماهای درختی مثل VSCode sidebar، Mac Finder، فیگما Layers
- پشتیبانی از هر دو حالت controlled و uncontrolled
- درگاندراپ، تغییر نام inline، و فیلتر جستجو بهصورت توکار
- رندرینگ مجازیسازیشده برای عملکرد بهتر با دادههای زیاد
- قابلیت sync کردن selection با state بقیهی اپ
- امکان شخصیسازی کامل ظاهر از طریق custom componentها
- پشتیبانی از idAccessor و childrenAccessor برای دادههایی با ساختارهای مختلف
- دسترسی به Tree API از طریق ref برای کنترل برنامهای درخت
