TicketViewerV2 is a React component used for displaying and managing seat selection in a ticket booking system. It accepts selected seats and seat data as props and invokes a callback when a seat is clicked.
- React 18+ – Make sure you are using React version 18 or newer.
Import the component in your project. Adjust the import path as needed:
import React, { useState } from 'react';
import TicketViewerV2 from 'ticker-viewer';
Below is an example of how to use the TicketViewerV2 component in your application:
const [selectedSeats, setSelectedSeats] = useState([]);
const handleSeatClick = (seat, row, rowNumber) => {
setSelectedSeats(prev => {
const newSelectedSeats = [...prev];
const index = newSelectedSeats.findIndex(item => item.seatIndex === seat && item.rowIndex === row);
if (index > -1) {
newSelectedSeats.splice(index, 1);
} else {
newSelectedSeats.push({
seatIndex: seat,
rowIndex: row,
});
}
return newSelectedSeats;
});
console.log("Seat clicked:", seat, row, rowNumber);
};
// Usage in JSX
<TicketViewerV2
selectedSeats={selectedSeats}
data={JSON.parse(JSON.stringify(mockData))}
onSeatClick={handleSeatClick}
/>
selectedSeats: An array of objects representing the selected seats. Each object should include:
seatIndex (number): The index of the seat.
rowIndex (number): The index of the row.
data: The data to be rendered by the component. The structure of the data should match the component's expectations. Here is a brief example:
{
"rows": [
{
"rowNumber": 241,
"free": true
},
{
"rowNumber": 242,
"free": true
}
],
"x": 60,
"y": 240,
"texts": []
}