https://github.com/gcedo/react-seatmap
A React component to display a minimal, yet functional seatmap.
https://github.com/gcedo/react-seatmap
immutablejs react seatmap
Last synced: 5 months ago
JSON representation
A React component to display a minimal, yet functional seatmap.
- Host: GitHub
- URL: https://github.com/gcedo/react-seatmap
- Owner: gcedo
- License: mit
- Created: 2015-09-07T08:25:16.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T21:24:10.000Z (over 5 years ago)
- Last Synced: 2025-08-09T14:50:04.094Z (6 months ago)
- Topics: immutablejs, react, seatmap
- Language: JavaScript
- Size: 173 KB
- Stars: 45
- Watchers: 3
- Forks: 18
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://nodei.co/npm/react-seatmap/)
# react-seatmap
A React component to display a minimal, yet functional seatmap.
### Usage
Two versions are available. The default one can be installed via `npm install react-seatmap` and you will need to attach a stylesheet to see a decent seatmap. You can find a sample one in main.css.
```javascript
import React from 'react';
import Seatmap from 'react-seatmap';
React.render(
,
document.getElementById('app')
);
```
There is a bundled version available in `dist`, where the css is bundled together with the component via webpack.
### props
#### `addSeatCallback: PropTypes.func(row, number)`
The callback executed when a seat is added
- `row`, the row number
- `seat`, the seat number
#### `alpha: PropTypes.bool`
`true` if your rows are enumerated using letters, `false` otherwise.
#### `maxReservableSeats: PropTypes.number`
The maximum number of seats that can be selected.
#### `removeSeatCallback: PropTypes.func(row, number)`
The callback executed when a seat is removed
- `row`, the row number
- `seat`, the seat number
#### `rows: PropTypes.arrayOf(RowType)`
The array containing the data to build the seatmap.
`RowType` is defined as `PropTypes.arrayOf(SeatType)`, and `SeatType` is
```
PropTypes.shape({
number: PropTypes.string.isRequired,
isReserved: PropTypes.bool
});
```
where
- `number` is the seat number;
- `isReserved` tells whether the seat is already reserved or not (you can leave this empty when the seat is free)
If there is no seat at that location (e.g., space next to an aisle seat), put `null`.
#### `seatWidth: PropTypes.number` (default: 35)
The seat width. Needs to be customized as the seatmap width are computed from this
number.