تكامل و SDK رسمي
مكون صور تفاعلي مع التحميل الكسول وتنسيق srcset المتكيف
مكون React فائق الخفة والأداء يدير تلقائياً أبعاد srcset المتجاوبة والاختيار الذكي لصيغ WebP/AVIF وعناصر التمويه الناعمة.
تثبيت:
حزمة TSXnpm install @smallpict/reactمثال على التطبيق البرمجي
tsximport { SmallPictImage } from '@smallpict/react';
export function ProductHero() {
return (
<SmallPictImage
src="https://my-bucket.s3.amazonaws.com/camera.jpg"
alt="Pro Mirrorless Camera"
width={800}
height={500}
format="auto" // Auto-selects AVIF or WebP based on browser support
quality={85}
placeholder="blur"
className="rounded-2xl shadow-xl"
/>
);
}خطوات التكامل
1تثبيت الحزمة
ثبت حزمة @smallpict/react في مشروعك عبر npm أو yarn.
2تهيئة المزود
قم بتغليف تطبيقك باستخدام SmallPictProvider مع تمرير مفتاح API الخاص بك.
3عرض مكونات الصور
استبدل وسوم img العادية بالمكون المحسن المزود بدعم أصلي لـ srcset.
المزايا الرئيسية
- توليد تلقائي لخيارات srcset المتناسبة مع شاشات ريتينا العالية الدقة
- دعم مدمج للصور التمهيدية المموهة والانتقالات البصرية السلسة
- حجم حزمة نهائي يقل عن 2 كيلوبايت دون مكتبات خارجية ثقيلة
- متوافق مع Vite وRemix وCreate React App وGatsby
وثائق المطورين الرسمية
هل تحتاج إلى إرشادات كاملة ومواصفات API؟
استكشف مراجع المعلمات وآليات المصادقة وإرشادات الاختبار المحلي في دليل مطوري مكون React الرسمي.
عزز أداء مسار صور مكون React الخاص بك
استمتع بتحسين صور AVIF و WebP بأقل من 50 مللي ثانية في تطبيقك. بدون رسوم إعداد ومفاتيح تجريبية فورية.
