---
title: "React seating chart"
description: "Install @seatlayer/react, render an interactive React seating chart with live availability and seat selection, create holds, and book on your server."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.seatlayer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React seating chart

The official SeatLayer React seat map component adds an interactive seating
chart and seat picker to reserved-seating apps on the web. The
[`@seatlayer/react` package](https://www.npmjs.com/package/@seatlayer/react)
renders a real DOM component — not an iframe — with typed props, callbacks,
and an imperative handle for live availability, seat selection, temporary
holds, and best-available seating. TypeScript definitions ship in the package.

[Inspect the React source](https://github.com/seatlayer/seatlayer-sdk),
learn about the [SeatLayer reserved-seating platform](https://seatlayer.io/),
or try the [browser seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre).

> **The app selects and holds; your server books**
>
> Never put a SeatLayer secret key in browser code. Send the opaque hold id to
> your trusted backend, inspect the hold there, calculate the charge from
> server data, and book with a stable `bookingRef`.

## Install the package

```bash
npm install @seatlayer/react
```

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

## Render a seating chart

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

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

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.

## Select, hold, and hand off checkout

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](/buyer-sdk/holds-and-checkout) before
connecting a production order flow.

## Frequently asked questions

### Is this a real React component or an iframe?

`SeatingChart` renders a plain `div` in your DOM and drives the buyer
renderer directly — no iframe. Props, callbacks, and the imperative handle
are all typed.

### 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.

### How do temporary seat holds work?

Selecting seats creates a temporary hold that reserves inventory against
concurrent buyers for a limited window. The hold expires automatically if
checkout does not complete — `onHoldExpired` tells the app to return the
buyer to the map — and holds can be extended or resumed for longer checkouts.

### Can I use my own payment provider?

Yes. SeatLayer never processes payment inside the seat map. The browser hands
the hold id to your backend, and your backend charges through any payment
provider you already use before booking the hold.

### Is there a plain JavaScript version, or Vue and Angular?

Yes — [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) for any
framework or none, plus
[`@seatlayer/vue`](https://www.npmjs.com/package/@seatlayer/vue) and
[`@seatlayer/angular`](https://www.npmjs.com/package/@seatlayer/angular) with
the same typed contract.

## Next steps

- [Install @seatlayer/react on npm](https://www.npmjs.com/package/@seatlayer/react)
- [Run or inspect the SDK source](https://github.com/seatlayer/seatlayer-sdk)
- [Understand the SeatLayer platform](https://seatlayer.io/)
- [Explore the 3D seating chart](https://seatlayer.io/3d-seat-map/)
- [Connect holds to secure checkout](/buyer-sdk/holds-and-checkout)

Source: https://docs.seatlayer.io/buyer-sdk/react/index.mdx