ticker-viewer
TypeScript icon, indicating that this package has built-in type declarations

0.1.8 • Public • Published

TicketViewerV2

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.

Requirements

  • React 18+ – Make sure you are using React version 18 or newer.

Installation

Import the component in your project. Adjust the import path as needed:

import React, { useState } from 'react';
import TicketViewerV2 from 'ticker-viewer'; 

Usage

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}
/>

Props

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": []
}

Readme

Keywords

none

Package Sidebar

Install

npm i ticker-viewer

Weekly Downloads

0

Version

0.1.8

License

none

Unpacked Size

40.3 kB

Total Files

25

Last publish

Collaborators

  • dev2studio