این چند وقته سرم حسابی شلوغه و کمتر میرسم مطالعه جانبی داشته باشم. اخیرا یک تجربه ای در حوزه NextJS داشتم که ارزش به اشتراک گذاشتن داره. اونم ارائه یک کامپوننت با چند تا تم مختلف هست. وقتی قراره به عنوان ورودی اسم یک تم رو بگیریم و بر اساس اون تم شرایط نمایش کامپوننت عوض بشه.
تقریبا همه راه حل هایی که در سرچ پیدا کردم قدیمی شدند، واقعا به درد نمیخوردند و قابل پیاده سازی با TypeScript نبودند.
در این روش در واقع همه چیز در abstraction مشخص میشه و داخل تابع کامپوننت فقط مقداردهی صورت میگیره.
فرض کنید یک کامپوننت دارم به است MyComponent که قراره با چند تا تم پیاده بشه و به عنوان ورودی یکی از تم ها رو بهش پاس بدیم.
اول میام یک تایپ اضافه میکنم و متغیرهای هر تم رو مشخص میکنم:
این متغیرها میتونن شامل آیکن ها یا هر رنگ و متن و عددی باشند.
اگر شما هم مثل من از tailwind استفاده میکنین، حواستون به داینامیک کردن اسم کلاس ها در tailwind باشه.
اگر لازمه مقاله داینامیک کردن اسم کلاس ها در tailwind رو مطالعه کنید.
بعدش میام یک لیست از تم ها رو داخل کامپوننت مهیا میکنم:
و در آخر با استفاده از keyOf type operator در typescript تایپ ورودی کامپوننت رو مشخص میکنم:
اول ورودی کامپوننت رو مشخص میکنم
اگر قبلا از این کامپوننت جاهای متعددی استفاده کردیم، میتونیم ورودی تم رو اختیاری تعریف کنیم. اگر ورودی مشخص نشه، از همون تمی استفاده میکنیم که قبلا استفاده میکردیم.
مرحله دوم میام داخل کامپوننت مقدار دهی theme ها رو انجام میدم:
اگر مثال اول مقاله رو ببینیم، مشخصه که تم همیشگی مون dark هست.
مرحله سوم defaultTheme و تم فعلی رو تعریف میکنم:
کد بالا خوانایی بالاتری داره. کد پایین جمع و جور تره:
مرحله آخر وقت تغییر خروجی کامپوننت هست:
بریم کل کارهای انجام شده رو با هم ببینیم:
میتونم به همون شکل سابق از کامپوننتم استفاده کنم:
در این حالت همه چیز دقیقا مثل قبل نمایش داده میشه.
یا با مشخص کردن یکی از تم ها:
مشخص کنم کامپونتن با کدوم تم میخوام نمایش داده بشه
موفق باشید
