React Seat Map Picker

Introduction

The React Seat Map Picker is a powerful and flexible component that allows users to select seats on a virtual seat map. It is commonly used in event ticketing, flight booking, and other applications where users need to choose seats for an event or travel. In this tutorial, we will guide you through the process of using the React Seat Map Picker component in your React application.

Prerequisites

Before starting this tutorial, make sure you have:

• A basic understanding of React and JavaScript
• A code editor or IDE (Integrated Development Environment)
• A React project set up with a src directory and an index.js file

Step 1: Install the React Seat Map Picker

To use the React Seat Map Picker, you need to install it as a dependency in your React project. Run the following command in your terminal:

npm install react-seat-map-picker

Step 2: Import the React Seat Map Picker

In your index.js file, import the React Seat Map Picker component:

import React from 'react';
import { SeatMapPicker } from 'react-seat-map-picker';

Step 3: Create a Seat Map

Create a seat map object that defines the layout of the seats. The seat map object should have the following properties:

• rows: An array of row objects, where each row object has the following properties:
  • seats: An array of seat objects, where each seat object has the following properties:
    • id: A unique identifier for the seat
    • x: The x-coordinate of the seat on the seat map
    • y: The y-coordinate of the seat on the seat map
    • width: The width of the seat
    • height: The height of the seat
• columns: An array of column objects, where each column object has the following properties:
  • seats: An array of seat objects, where each seat object has the same properties as above

Here is an example seat map object:

const seatMap = {
  rows: [
    {
      seats: [
        { id: 'A1', x: 0, y: 0, width: 50, height: 50 },
        { id: 'A2', x: 50, y: 0, width: 50, height: 50 },
        { id: 'A3', x: 100, y: 0, width: 50, height: 50 },
      ],
    },
    {
      seats: [
        { id: 'B1', x: 0, y: 50, width: 50, height: 50 },
        { id: 'B2', x: 50, y: 50, width: 50, height: 50 },
        { id: 'B3', x: 100, y: 50, width: 50, height: 50 },
      ],
    },
  ],
  columns: [
    {
      seats: [
        { id: '1', x: 0, y: 0, width: 50, height: 50 },
        { id: '2', x: 50, y: 0, width: 50, height: 50 },
        { id: '3', x: 100, y: 0, width: 50, height: 50 },
      ],
    },
    {
      seats: [
        { id: '4', x: 0, y: 50, width: 50, height: 50 },
        { id: '5', x: 50, y: 50, width: 50, height: 50 },
        { id: '6', x: 100, y: 50, width: 50, height: 50 },
      ],
    },
  ],
};

Step 4: Render the Seat Map Picker

Render the Seat Map Picker component and pass the seat map object as a prop:

function App() {
  return (
    <div>
      <SeatMapPicker seatMap={seatMap} />
    </div>
  );
}

Step 5: Handle Seat Selection

To handle seat selection, you need to add an onSelect event handler to the Seat Map Picker component. This event handler will be called whenever a user selects a seat. Here is an example:

function App() {
  const [selectedSeats, setSelectedSeats] = useState({});

  const onSelect = (seatId) => {
    setSelectedSeats((prevSelectedSeats) => ({...prevSelectedSeats, [seatId]: true }));
  };

  return (
    <div>
      <SeatMapPicker
        seatMap={seatMap}
        onSelect={onSelect}
        selectedSeats={selectedSeats}
      />
    </div>
  );
}

In this example, the onSelect event handler updates the selectedSeats state object with the selected seat ID.

Step 6: Display Selected Seats

To display the selected seats, you can use the selectedSeats state object to render a list of selected seats. Here is an example:

function App() {
  //...

  return (
    <div>
      <SeatMapPicker
        seatMap={seatMap}
        onSelect={onSelect}
        selectedSeats={selectedSeats}
      />
      <ul>
        {Object.keys(selectedSeats).map((seatId) => (
          <li key={seatId}>{seatId}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, the selectedSeats state object is used to render a list of selected seats.

That's it! With these steps, you should now have a basic React Seat Map Picker component up and running in your application. You can customize the component further by adding additional features, such as seat availability, pricing, and more.