React seat map SDK

@seatlayer/react is the official SeatLayer package for React 17 and later. It ships typed React components for a complete buyer picker, a headless seating chart, embedded venue design, and live inventory operations. The buyer components render into your DOM rather than an iframe, and TypeScript definitions ship for both ESM and CommonJS consumers.

Use this page to choose an export, confirm package requirements, and inspect the React component contract. To build one checkout flow from install through hold handoff, follow the procedural React seat-map tutorial.

Inspect the React source, learn about the SeatLayer reserved-seating platform, or try the browser seat-map demo.

Choose a React export

The package also re-exports SeatPickerWidget and attachPickerFrame from @seatlayer/js for hosts that deliberately choose those framework-agnostic delivery helpers.

Install the package

npm install @seatlayer/react

React 17 or later is supported, with ESM and CommonJS builds and bundled TypeScript types.

Render the headless component

import { SeatingChart } from '@seatlayer/react';

function EventSeatMap() {
  return (
    <SeatingChart
      event="<YOUR_EVENT_KEY>"
      publicKey="<YOUR_PUBLIC_KEY>"
      currency="USD"
      onReady={(info) => console.log('mode', info.mode)}
      onSelectionChange={(seats) => updateBasket(seats)}
      onHoldExpired={() => returnBuyerToMap()}
    />
  );
}

For a public Platform event, use a publishable key that matches the event mode (pk_test_… for test or pk_live_… for live) and register the page’s exact Embed origin. The SDK obtains Public-only access directly and keeps the grant in memory, so your server does not mint a buyer token when the chart loads. For a login, presale, partner, or channel audience, replace publicKey with an async buyerAccessTokenProvider backed by your authenticated server; an explicit provider or token takes precedence.

The component owns its container and live updates; identity props such as the event key rebuild the chart cleanly. Calling a handle method before the chart exists returns an empty answer rather than throwing, so effects and early renders stay safe.

For a complete SeatPicker walkthrough instead of a headless reference example, continue with the React tutorial.

Browser and server boundary

Keep the security boundary explicit:

• The browser selects seats and creates a temporary hold.
• Your backend inspects the hold and derives the amount to charge.
• Your payment and order workflow stays on your server.
• Your backend books with a stable bookingRef so retries are safe.
• Expiry and inventory conflicts return buyers to a recoverable selection state.

Continue with holds and checkout before connecting a production order flow.

Package questions

What does @seatlayer/react export?

The primary buyer exports are SeatPicker and SeatingChart. The same package also exposes SeatManager, EmbeddedDesigner, typed component handles, and the framework-agnostic widget helpers listed above. Use the linked detailed references for each surface rather than treating every export as the same buyer component.

Is this a real React component or an iframe?

SeatPicker, SeatingChart, and SeatManager render a plain div in your React tree and drive their runtime directly. EmbeddedDesigner is the deliberate exception: the organizer Designer is isolated in a hosted iframe. Props, callbacks, and imperative handles are typed.

Does the package include TypeScript definitions?

Yes. The npm package includes declarations for ESM and CommonJS imports, plus typed props, callback payloads, and imperative component handles.

Does it work with Next.js?

Yes. The seat map is a browser component, so render it from a component you mark with "use client" and it works in the App Router and Pages Router alike.

Which React and module versions are supported?

React 17 or later is the declared peer requirement. The package publishes ESM and CommonJS builds so modern bundlers can select the matching entry point.

Next steps

• Build the complete React flow step by step
• Install @seatlayer/react on npm
• Run or inspect the SDK source
• Understand the SeatLayer platform
• Explore the 3D seating chart
• Connect holds to secure checkout