SmallPict LogoSmallPict
تكامل و SDK رسمي

مكون صور تفاعلي مع التحميل الكسول وتنسيق srcset المتكيف

مكون React فائق الخفة والأداء يدير تلقائياً أبعاد srcset المتجاوبة والاختيار الذكي لصيغ WebP/AVIF وعناصر التمويه الناعمة.

تثبيت:npm install @smallpict/react
حزمة TSX

مثال على التطبيق البرمجي

tsx
import { 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

عزز أداء مسار صور مكون React الخاص بك

استمتع بتحسين صور AVIF و WebP بأقل من 50 مللي ثانية في تطبيقك. بدون رسوم إعداد ومفاتيح تجريبية فورية.