‏ویرایشگر تصویر Unlayer برای ری‌اکت

شرکت Unlayer ادیتور تصویر تحت‌وبش رو به شکل یه wrapper رسمی ری‌اکت بیرون داده: بستهٔ @unlayer/react-image-editor. تو مستندات پروژه اومده که کامپوننت به ری‌اکت ۱۸ به بالا نیاز داره، دایرکتیو 'use client' رو با خودش می‌آره و فقط داخل افکت‌ها به DOM دست می‌زنه؛ برای همین تو محیط‌های React Server Components مثل App Router نکست هم بدون تنظیم اضافه بالا میاد.

راه‌اندازیش کوتاهه: یه آدرس عکس یا data URL می‌دی و کال‌بک onSave نتیجهٔ ویرایش رو به شکل dataUrl و blob تحویلت می‌ده. با ref هم به خود instance ادیتور می‌رسی که متدهایی مثل getImage()، hasChanges()، reset()، updateOptions() و destroy() داره.

import ImageEditor from '@unlayer/react-image-editor';

<ImageEditor
  ref={editorRef}
  image="https://example.com/photo.jpg"
  options={{ theme: 'light' }}
  onSave={({ dataUrl, blob }) => console.info('Saved', dataUrl.length, 'bytes')}
/>

نکتهٔ مهم برای پروداکشن، رفتار کامپوننت موقع عوض شدن propهاست: تغییر image از طریق reset() اعمال می‌شه و تاریخچهٔ undo/redo و چت هوش مصنوعی رو پاک می‌کنه، theme و locale و translations بدون remount جا می‌افتن، ولی هر کلید دیگه‌ای زیر options ادیتور رو نابود و دوباره می‌سازه. کال‌بک‌ها هیچ‌وقت باعث remount نمی‌شن و همیشه آخرین نسخه‌شون صدا زده می‌شه.

هشت ابزار crop، resize، filter، draw، text، shapes، stickers و frame پیش‌فرض روشنن و از options.features.imageEditor.tools می‌شه هر کدوم رو خاموش کرد یا آیکونش رو عوض کرد — ولی چون features جزو کلیدهای remount هست، مستندات تأکید می‌کنه لیست ابزارها رو قبل از mount مشخص کنی نه وسط کار. یه دستیار هوش مصنوعی اختیاری هم داره که projectId از کنسول Unlayer می‌خواد، و ده زبان هم داخلش بسته‌بندی شده.

نکات کلیدی:

• نصب با npm install @unlayer/react-image-editor و نیاز به ری‌اکت ۱۸ به بالا
• onLoadError برای وقتی عکس تو کنواس لود نشده و onError برای خطاهای خود wrapper
• تغییر prop مربوط به image تاریخچهٔ undo/redo رو پاک می‌کنه
• دستیار هوش مصنوعی اختیاریه و projectId می‌خواد
• لایسنس MIT