Canvas

React, Vue, Angular, Next, natif dans votre stack.

Les wrappers officiels transforment le plan en composant idiomatique : props entrantes, événements sortants. Next.js obtient le chargement de données en composant serveur avec revalidation et un squelette pendant le chargement.

Découvrir les atouts

Ça vous parle ?

Des wrappers DIY qui dérivent

Votre wrapper React bricolé accuse trois versions de retard sur la bibliothèque. Les wrappers officiels partent avec le package.

La peur du verrouillage framework

Parier la boutique sur un seul framework fait mal à la refonte. Le même plan tourne en React, Vue, Angular ou vanilla.

Gymnastique SSR

Les widgets client combattent le rendu serveur. Le wrapper Next.js charge les données du plan en composant serveur, revalidation incluse.

Idiomatique, où que vous affichiez

01React et Next.jsUn composant avec props typées pour chaque événement, plus points d'entrée App Router et Pages Router.
02Chargement en composant serveurSeatmapServerWrapper charge les données du plan côté serveur avec une fenêtre de revalidation, SEO-friendly et rapide.
03Un squelette pendant le chargementSeatmapSkeleton maintient la mise en page jusqu'à ce que le plan soit prêt, pas de décalage de contenu.
04Plugin Vue 3Enregistrez le plugin, émettez des événements avec des @-handlers. Le plan se sent natif à Vue.
05Angular, correctementComposant, directive, module, service et standalone, pas un hack iframe léger.
06Vanilla quand vous voulezAucun framework requis. La bibliothèque cœur se monte n'importe où avec un conteneur et une config.

De l'installation à l'interactif

venue-page.tsx
import { SeatmapServerWrapper } from "seatmap-canvas/nextjs/app-router";
 
// Server component: chart data fetched with revalidation
export default function VenuePage() {
  return (
    <SeatmapServerWrapper
      dataSource={() => fetchChart("main-hall")}
      revalidate={60}
      config={{
        theme: "dark",
        multi_select: true,
        onSeatSelect: (seat) => cart.add(seat),
      }}
    />
  );
}
TypeScript · seatmap-canvas/nextjsSeatmapServerWrapper

Montez-le dans votre stack

React, Vue, Angular ou vanilla, la démo tourne dessus.