@alisaitteke/seatmap-canvas-react
v1.0.7
Published
This is the ReactJS implementation of the original seatmap-canvas library, an open-source tool designed for interactive seat selection in various environments like stadiums, theaters, and event venues. Leveraging the capabilities of React and d3.js, this
Downloads
37
Readme
Seatmap Canvas - React
This is the ReactJS implementation of the original seatmap-canvas library, an open-source tool designed for interactive seat selection in various environments like stadiums, theaters, and event venues. Leveraging the capabilities of React and d3.js, this library provides a flexible and efficient solution for managing seat arrangements.
Features
- React Integration: Designed specifically for React projects, offering a streamlined development experience.
- Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.
- Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.
- Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.
- Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.
- Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.
Planned
- Vue Integration: Designed specifically for Vue or Nuxt projects, offering a streamlined development experience.
- Angular Integration: Designed specifically for Angular projects, offering a streamlined development experience.
Installation
Usage
const seatmapRef = React.createRef();
<Seatmap
className="w-full flex-1 h-full"
ref={seatmapRef}
seatClick={seatClick}
blocks={blocks}
config={config}>
</Seatmap>
Config
const config = {
legend: true,
style: {
seat: {
hover: '#8fe100',
color: '#f0f7fa',
selected: '#8fe100',
check_icon_color: '#fff',
not_salable: '#0088d3',
focus: '#8fe100',
},
legend: {
font_color: '#3b3b3b',
show: false
},
block: {
title_color: '#fff'
}
}
}
API
Zoom To Block
seatmapRef.current.zoomManager.zoomToBlock(blockId)
Get Selected Seats
const selectedSeats = seatmapRef.current.getSelectedSeats()
Seat Click Handler
const seatClick = (seat) => {
if (!seat.isSelected() && seat.item.salable === true) {
seat.select()
} else {
seat.unSelect()
}
}
Component Example
import React from 'react';
import SeatmapCanvas from '@alisaitteke/seatmap-canvas';
const MySeatmap = () => {
const config = {
// Your CONFIG here
};
let blocks = [
// Your BLOCK_DATA here
]
const seatClick = (seat) => {
if (!seat.isSelected() && seat.item.salable === true) {
seat.select() // Set select seat
} else {
seat.unSelect() // Unselect seat
}
}
return (
<Seatmap
className="w-full flex-1 h-full"
ref={seatmapRef}
seatClick={seatClick}
blocks={blocks}
config={config}>
</Seatmap>
);
};
export default MySeatmap;
Contributors
Ali Sait TEKE [email protected]