Multiple events

Several events on one page with one seat map. Switching events loads that event's own seats, and any hold on the last one is released.

Try it

Test mode

Choose an event: Above the map
Pick seats: Tap open seats on the map
Hold them: Switch events to see the hold released

No real money moves.Seats reset every night.

Loading the event list

Your seats

Pick a seat on the map to start.

Copy this code

components/EventSwitcher.tsx

"use client";
import { useRef, useState } from "react";
import { SeatingChart, type SeatingChartHandle } from "@seatlayer/react";

export function EventPicker({ events }: { events: { key: string; name: string }[] }) {
  const chart = useRef<SeatingChartHandle>(null);
  const [current, setCurrent] = useState(events[0]);

  async function switchTo(next: typeof current) {
    await chart.current?.release(); // a hold belongs to its own event
    setCurrent(next);
  }

  return (
    <>
      {events.map((event) => (
        <button key={event.key} onClick={() => switchTo(event)}>{event.name}</button>
      ))}
      <SeatingChart key={current.key} ref={chart} event={current.key} publicKey="pk_test_..." />
    </>
  );
}