Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alisaitteke/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.
https://github.com/alisaitteke/seatmap-canvas-react
booking canvas d3 react reactjs seatselection
Last synced: 14 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/alisaitteke/seatmap-canvas-react
- Owner: alisaitteke
- Created: 2022-08-02T09:35:23.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T16:26:22.000Z (5 months ago)
- Last Synced: 2024-10-02T07:10:45.120Z (about 1 month ago)
- Topics: booking, canvas, d3, react, reactjs, seatselection
- Language: TypeScript
- Homepage: https://seatmap.alisait.com
- Size: 245 KB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
[](https://alisaitteke.github.io/seatmap-canvas)
# Seatmap Canvas - React
This is the ReactJS implementation of the original [seatmap-canvas](https://alisaitteke.github.io/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.
[LIVE DEMO](https://alisaitteke.github.io/seatmap-canvas/)
## Installation
npm i @alisaitteke/seatmap-canvas-react --save
OR
yarn add @alisaitteke/seatmap-canvas-react --save
### Usage
```js
const seatmapRef = React.createRef();
```
### Config
```js
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
```js
seatmapRef.current.zoomManager.zoomToBlock(blockId)
```
#### Get Selected Seats
```js
const selectedSeats = seatmapRef.current.getSelectedSeats()
```
#### Seat Click Handler
```js
const seatClick = (seat) => {
if (!seat.isSelected() && seat.item.salable === true) {
seat.select()
} else {
seat.unSelect()
}
}
```
#### Component Example
```js
import React from 'react';
import SeatmapCanvas from '@alisaitteke/seatmap-canvas';
const MySeatmap = () => {
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'
}
}
}
let blocks = [
{
"id": 1,
"title": "Test Block 1",
"color": "#2c2828",
"labels": [
{
"title": "A",
"x": -30,
"y": 0
},
{
"title": "B",
"x": 120,
"y": 30
}
],
"seats": [
{
"id": 1,
"x": 0,
"y": 0,
"salable": true,
"note": "note test",
"title": "49"
},
{
"id": 2,
"x": 30,
"y": 0,
"salable": true,
"note": "note test",
"title": "47"
}
]
}
]
const seatClick = (seat) => {
if (!seat.isSelected() && seat.item.salable === true) {
seat.select() // Set select seat
} else {
seat.unSelect() // Unselect seat
}
}
return (
);
};
export default MySeatmap;
```
## Contributors
Ali Sait TEKE