Snapkit Logo

Aperçu des Intégrations#

Snapkit fournit des packages officiels pour une intégration transparente avec les frameworks JavaScript populaires. Choisissez le package qui convient le mieux à votre stack technologique.

Intégrations Disponibles#

React

Composant React haute performance avec détection automatique de format (AVIF, WebP, JPEG) et compatibilité Next.js Image.

Voir la Documentation React →

Next.js

Intégration transparente du composant Next.js Image avec génération dynamique de srcset basée sur DPR et couverture de tests de 90%+.

Voir la Documentation Next.js →

Comparaison Rapide#

Fonctionnalité
React
Next.js
Package
@snapkit-studio/react
@snapkit-studio/nextjs
Taille du Bundle
~9KB (optimisé) / ~22KB (complet)
~15KB
Composant Image
Supporté
Supporté
Pattern Provider
Supporté
Supporté
Support SSR
Avec configuration
Supporté
Support SSG
Avec configuration
Supporté
Support ISR
Non supporté
Supporté
App Router
N/A
Supporté
Pages Router
N/A
Supporté
Imports Statiques
Non supporté
Supporté
Optimisation Build-Time
Non supporté
Supporté
Format Automatique
Supporté
Supporté
Transformations Visuelles
Supporté
Supporté
Support TypeScript
Supporté
Supporté

Fonctionnalités Principales#

Toutes les intégrations Snapkit offrent ces fonctionnalités principales :

🚀 Optimisation Automatique#

  • Sélection de Format : Sert automatiquement WebP, AVIF ou le format original basé sur le support du navigateur
  • Ajustement de Qualité : Qualité dynamique basée sur les conditions réseau
  • Images Responsives : Génération automatique de srcset pour différentes tailles d'écran

🎨 Transformations d'Images#

  • Redimensionnement & Recadrage : Dimensionnement dynamique avec diverses options d'ajustement
  • Effets Visuels : Flou, niveaux de gris, netteté et plus
  • Conversion de Format : Convertir entre formats à la volée
  • Extraction de Région : Extraire des régions spécifiques des images

⚡ Performance#

  • Lazy Loading : Support intégré d'Intersection Observer
  • Priority Loading : Optimisation LCP avec images prioritaires
  • Progressive Enhancement : Fallback pour navigateurs non supportés
  • Livraison CDN : Distribution réseau edge global

🛠️ Expérience Développeur#

  • Support TypeScript : Sécurité de type complète et IntelliSense
  • API Simple : APIs de composants familières
  • Configuration Flexible : Pattern provider ou configuration par image
  • Gestion d'Erreurs : Fallbacks gracieux et états d'erreur

Installation#

Choisissez votre framework et installez le package correspondant :

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

Exemple d'Utilisation de Base#

Les deux packages suivent des patterns d'utilisation similaires :

// React
import { Image } from '@snapkit-studio/react';
 
// Next.js
import { Image } from '@snapkit-studio/nextjs';
 
// Utilisation (identique pour les deux)
<Image
  src="/hero.jpg"
  alt="Image hero"
  width={800}
  height={600}
  priority
  transforms={{
    format: 'auto',
    quality: 85
  }}
/>

Configuration Provider#

Centralisez la configuration avec le pattern provider :

// React ou 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>

Quelle Intégration Devrais-je Utiliser ?#

Choisissez l'intégration React si :#

  • Vous construisez une React SPA (Single Page Application)
  • Vous utilisez Create React App
  • Vous travaillez avec Vite + React
  • Vous construisez une bibliothèque ou composant React
  • Vous avez besoin d'une taille de bundle minimale (~9KB optimisé)

Choisissez l'intégration Next.js si :#

  • Vous construisez avec Next.js (évidemment !)
  • Vous avez besoin du support SSR/SSG/ISR
  • Vous voulez des optimisations build-time
  • Vous utilisez App Router ou Pages Router
  • Vous avez besoin d'imports d'images statiques
  • Vous voulez une migration transparente depuis next/image

Bientôt Disponible#

Nous travaillons sur des intégrations officielles pour :

  • Vue.js - Support complet de la Vue 3 Composition API
  • Angular - Composant Angular natif
  • Svelte - Package optimisé SvelteKit
  • Remix - Support complet du Remix loader
  • Gatsby - GraphQL et optimisation build-time

Ressources#

Besoin d'Aide ?#