React Vehicle Seat Picker

Overview

React Vehicle Seat Picker is a highly customizable seat selection component that supports multiple vehicle layouts and configurations. Perfect for building booking systems for buses, trains, airplanes, cinemas, and any venue with seat reservations.

Features

• 🚌 Multiple vehicle layouts - Bus, train, airplane, cinema
• 🎨 Fully customizable styling - Custom CSS classes and inline styles
• 🏷️ Row and column labeling - Flexible labeling system
• 🚫 Disabled seat support - Mark seats as unavailable
• ✅ Multiple seat selection - Select multiple seats at once
• 📝 TypeScript support - Full type definitions included
• ⚡ Lightweight and performant - Minimal dependencies
• 📱 Responsive design - Works on all screen sizes
• ♿ Accessibility - ARIA labels and keyboard navigation

Installation

npm install react-vehicle-seatpicker
# or
yarn add react-vehicle-seatpicker
# or
pnpm add react-vehicle-seatpicker

Basic Usage

import { SeatPicker } from 'react-vehicle-seatpicker';
import { useState } from 'react';

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

  return (
    <SeatPicker
      rows={10}
      columns={4}
      selectedSeats={selectedSeats}
      onSeatSelect={setSelectedSeats}
    />
  );
}

Advanced Usage

Custom Seat Layout

<SeatPicker
  rows={12}
  columns={6}
  selectedSeats={selectedSeats}
  onSeatSelect={setSelectedSeats}
  disabledSeats={['1-A', '1-F', '2-C']}
  rowLabels={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']}
  columnLabels={['A', 'B', 'C', 'D', 'E', 'F']}
  seatWidth={40}
  seatHeight={40}
  gap={10}
/>

Bus Layout

<SeatPicker
  rows={15}
  columns={4}
  layout="bus"
  selectedSeats={selectedSeats}
  onSeatSelect={setSelectedSeats}
  showDriverSeat={true}
/>

Airplane Layout

<SeatPicker
  rows={30}
  columns={6}
  layout="airplane"
  selectedSeats={selectedSeats}
  onSeatSelect={setSelectedSeats}
  seatClasses={{
    economy: [1, 20],
    business: [21, 30]
  }}
/>

Props

Styling

You can customize the appearance using CSS classes:

.seat-picker {
  /* Container styles */
}

.seat {
  /* Default seat styles */
}

.seat.selected {
  /* Selected seat styles */
}

.seat.disabled {
  /* Disabled seat styles */
}

Live Demo

Visit our demo site to try it out: react-vehicle-seatpicker.tamandigital.com

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

We welcome contributions! Please see our Contributing Guide.

License

MIT License - feel free to use in commercial and personal projects.

Support

• 📧 Email: support@tamandigital.com
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Full Docs