🚀 Getting Started with TheaterSeatSelect

The TheaterSeatSelect component requires a config that defines how your seats are structured.
This config follows the SeatConfig type.

---

🔑 Step 1 — Install

npm install react-seat-select
# or
yarn add react-seat-select

🔑 Step 2 — Define Your SeatConfig

The SeatConfig is an array of sections, where each section contains rows and seats.

type TheaterSeat = {
  id: string;
  isBlank?: boolean;
  label?: string;
};

type TheaterSeatRow = Seat[];

type TheaterSeatMap  = Partial<Record<string, TheaterSeatRow>>;

type TheaterSeatSection  = {
  title?: string;
  seats: TheaterSeatMap;
};

type TheaterSeatConfig  = TheaterSeatSection[];

✅ Minimal Example Config

[
  {
    title: "Section A",
    seats: {
      A: [
        { id: "A1", label: "A1" },
        { id: "A2", label: "A2" },
      ],
    },
  },
];

🔑 Step 3 — Render the Component

Here’s a working example with a small layout:

Live Editor

function Example() {
  const config = [
    {
      title: "Section A",
      seats: {
        A: [
          { id: "A1", label: "A1" },
          { id: "A2", label: "A2" },
        ],
      },
    },
  ];

  const [selectedSeats, setSelectedSeats] = useState<string[]>([]);

  return (
    <div>
      <TheaterSeatSelect
        config={config}
        onSelect={(seat) => setSelectedSeats((prev) => [...prev, seat.id])}
        onUnselect={(seat) =>
          setSelectedSeats((prev) => prev.filter((s) => s !== seat.id))
        }
      />
      <p style={{ marginTop: "1rem" }}>
        <strong>Selected Seats:</strong> {selectedSeats.join(", ") || "None"}
      </p>
    </div>
  );
}

Result

Loading...

✅ You now have a working TheaterSeatSelect with your first config! In the next section, we’ll explore props and customizations.