Snapkit Logo

Integration Overview#

Snapkit provides official packages for seamless integration with popular JavaScript frameworks. Choose the package that best fits your technology stack.

Available Integrations#

React

High-performance React component with automatic format detection (AVIF, WebP, JPEG) and Next.js Image compatibility.

View React Docs →

Next.js

Seamless Next.js Image component integration with dynamic DPR-based srcset generation and 90%+ test coverage.

View Next.js Docs →

Quick Comparison#

Feature
React
Next.js
Package
@snapkit-studio/react
@snapkit-studio/nextjs
Bundle Size
~9KB (optimized) / ~22KB (full)
~15KB
Image Component
Supported
Supported
Provider Pattern
Supported
Supported
SSR Support
With setup
Supported
SSG Support
With setup
Supported
ISR Support
Not supported
Supported
App Router
N/A
Supported
Pages Router
N/A
Supported
Static Imports
Not supported
Supported
Build-time Optimization
Not supported
Supported
Automatic Format
Supported
Supported
Visual Transforms
Supported
Supported
TypeScript Support
Supported
Supported

Core Features#

All Snapkit integrations provide these core features:

🚀 Automatic Optimization#

  • Format Selection: Automatically serves WebP, AVIF, or original format based on browser support
  • Quality Adjustment: Dynamic quality based on network conditions
  • Responsive Images: Automatic srcset generation for different screen sizes

🎨 Image Transformations#

  • Resize & Crop: Dynamic sizing with various fit options
  • Visual Effects: Blur, grayscale, sharpen, and more
  • Format Conversion: Convert between formats on-the-fly
  • Region Extraction: Extract specific regions from images

⚡ Performance#

  • Lazy Loading: Built-in Intersection Observer support
  • Priority Loading: Optimize LCP with priority images
  • Progressive Enhancement: Fallback for unsupported browsers
  • CDN Delivery: Global edge network distribution

🛠️ Developer Experience#

  • TypeScript Support: Full type safety and IntelliSense
  • Simple API: Familiar component APIs
  • Flexible Configuration: Provider pattern or per-image config
  • Error Handling: Graceful fallbacks and error states

Installation#

Choose your framework and install the corresponding package:

# For React applications
npm install @snapkit-studio/react
 
# For Next.js applications
npm install @snapkit-studio/nextjs

Basic Usage Example#

Both packages follow similar usage patterns:

// React
 
// Next.js
import { Image } from "@snapkit-studio/nextjs";
import { Image } from "@snapkit-studio/react";
 
// Usage (identical for both)
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={800}
  height={600}
  priority
  transforms={{
    format: "auto",
    quality: 85,
  }}
/>;

Provider Configuration#

Centralize configuration with the provider pattern:

// React or Next.js
import { SnapkitProvider } from "@snapkit-studio/[react|nextjs]";
 
<SnapkitProvider baseUrl="https://your-cdn.snapkit.studio" organizationName="your-org" defaultQuality={85} defaultFormat="auto">
  <YourApp />
</SnapkitProvider>;

Which Integration Should I Use?#

Choose React Integration If:#

  • Building a React SPA (Single Page Application)
  • Using Create React App
  • Working with Vite + React
  • Building a React library or component
  • Need minimal bundle size (~9KB optimized)

Choose Next.js Integration If:#

  • Building with Next.js (obviously!)
  • Need SSR/SSG/ISR support
  • Want build-time optimizations
  • Using App Router or Pages Router
  • Need static image imports
  • Want seamless migration from next/image

Coming Soon#

We're working on official integrations for:

  • Vue.js - Full Vue 3 composition API support
  • Angular - Native Angular component
  • Svelte - SvelteKit optimized package
  • Remix - Full Remix loader support
  • Gatsby - GraphQL and build-time optimization

Resources#

Need Help?#