आधिकारिक इंटीग्रेशन और SDK
React अनुप्रयोगों के लिए आधुनिक प्रतिक्रियाशील छवि घटक
सिंगल पेज ऐप्स और रिएक्ट फ्रेमवर्क (Vite, Remix, Gatsby, Astro) में गतिशील छवि रूपांतरण और ब्लर प्लेसहोल्डर को आसानी से एकीकृत करें।
इंस्टॉल:
TSX पैकेजnpm 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"
/>
);
}इंटीग्रेशन चरण
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 इमेज पाइपलाइन को सुपरचार्ज करें
अपने ऐप में 50ms से कम में AVIF और WebP इमेज ऑप्टिमाइज़ेशन का अनुभव करें। कोई सेटअप शुल्क नहीं, तुरंत सैंडबॉक्स कीज़।
