SmallPict LogoSmallPict
आधिकारिक इंटीग्रेशन और SDK

React अनुप्रयोगों के लिए आधुनिक प्रतिक्रियाशील छवि घटक

सिंगल पेज ऐप्स और रिएक्ट फ्रेमवर्क (Vite, Remix, Gatsby, Astro) में गतिशील छवि रूपांतरण और ब्लर प्लेसहोल्डर को आसानी से एकीकृत करें।

इंस्टॉल: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"
    />
  );
}

इंटीग्रेशन चरण

11. पैकेज स्थापित करें

अपने React प्रोजेक्ट में npm install @smallpict/react चलाएं।

22. SmallPictProvider कॉन्फ़िगर करें

अपने एप्लिकेशन रूट को अपनी API कुंजी और CDN डोमेन से लपेटें।

33. SmallPictImage जोड़ें

तात्कालिक प्रदर्शन लाभ के लिए img टैग को SmallPictImage से बदलें।

मुख्य लाभ

  • AVIF/WebP/PNG फ़ॉलबैक के साथ स्वचालित picture टैग
  • IntersectionObserver पर आधारित अंतर्निहित लेज़ी लोडिंग
  • शून्य लेआउट बदलाव (Cumulative Layout Shift = 0)
  • अल्ट्रा-लाइटवेट बंडल आकार (< 3KB gzipped)
आधिकारिक डेवलपर दस्तावेज़

क्या आपको पूर्ण गाइड और API विनिर्देश चाहिए?

हमारे आधिकारिक React कंपोनेंट SDK डेवलपर गाइड में पैरामीटर संदर्भ, प्रमाणीकरण और स्थानीय परीक्षण निर्देश देखें।

React कंपोनेंट SDK डॉक्स पढ़ें

अपने React कंपोनेंट SDK इमेज पाइपलाइन को सुपरचार्ज करें

अपने ऐप में 50ms से कम में AVIF और WebP इमेज ऑप्टिमाइज़ेशन का अनुभव करें। कोई सेटअप शुल्क नहीं, तुरंत सैंडबॉक्स कीज़।