### Install Seatchart via npm
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
This command installs the Seatchart library and its dependencies using npm, saving it to your project's `package.json`.
```npm
npm install --save seatchart
```
--------------------------------
### Initialize Seatchart.js with Custom Map Options and Event Listener
Source: https://github.com/omahili/seatchart.js/blob/master/examples/demo.html
Demonstrates how to initialize the Seatchart.js library by providing a comprehensive configuration object. This object defines map dimensions, various seat types with their labels, CSS classes, prices, and specific rows, along with pre-defined disabled, reserved, and selected seats. It also attaches an event listener to handle the 'submit' event, displaying the total price of selected seats.
```JavaScript
var options = {
map: {
rows: 10,
columns: 10,
seatTypes: {
default: {
label: 'Economy',
cssClass: 'economy',
price: 15
},
first: {
label: 'First Class',
cssClass: 'first-class',
price: 25,
seatRows: [0, 1, 2]
},
reduced: {
label: 'Reduced',
cssClass: 'reduced',
price: 10,
seatRows: [7, 8, 9]
}
},
disabledSeats: [
{ row: 0, col: 0 },
{ row: 0, col: 9 }
],
reservedSeats: [
{ row: 0, col: 3 },
{ row: 0, col: 4 }
],
selectedSeats: [{ row: 0, col: 5 }, { row: 0, col: 6 }],
rowSpacers: [3, 7],
columnSpacers: [5]
}
};
var element = document.getElementById('container');
var sc = new Seatchart(element, options);
sc.addEventListener('submit', function handleSubmit(e) {
alert('Total: ' + e.total + '€');
});
```
--------------------------------
### Basic Seatchart Integration in HTML
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
This HTML snippet demonstrates how to initialize Seatchart in a web page. It includes the necessary CSS and JavaScript files from a CDN, defines a custom seat type, and creates a new Seatchart instance linked to a container element.
```HTML
Seatchart Example
```
--------------------------------
### Include Seatchart via jsDelivr CDN
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
These URLs provide direct access to the Seatchart JavaScript and CSS files from the jsDelivr CDN, allowing for quick integration without a build step.
```Text
https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.js
https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.css
```
--------------------------------
### Integrate Seatchart Component into a React App
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
This React component demonstrates how to import and use the custom `Seatchart` component. It initializes Seatchart options, passes them to the component, and shows how to interact with the Seatchart instance (e.g., toggling a seat state) using a ref.
```TypeScript
// App.tsx
import React, { useRef } from 'react';
import SeatchartJS, { Options } from 'seatchart';
import Seatchart from './Seatchart';
import 'seatchart/dist/seatchart.min.css';
import './App.css';
const options: Options = {
map: {
rows: 7,
columns: 7,
seatTypes: {
default: {
label: 'Economy',
cssClass: 'economy',
price: 10,
},
},
},
};
const App = () => {
const seatchartRef = useRef();
const handleClick = () => {
const index = { row: 0, col: 6 };
const seat = seatchartRef.current?.getSeat(index);
seatchartRef.current?.setSeat(index, {
state: seat?.state === 'selected' ? 'available' : 'selected',
});
};
return (
);
}
export default App;
```
--------------------------------
### CSS Styling for Seatchart Seat Types
Source: https://github.com/omahili/seatchart.js/blob/master/examples/demo.html
Defines basic layout for the demo page and specific color schemes for different seat types (economy, first-class, reduced) using CSS classes. These styles are referenced in the Seatchart configuration to visually distinguish seat categories.
```CSS
body { display: flex; justify-content: center; }
.economy { color: white; background-color: #43aa8b; }
.first-class { color: white; background-color: #277da1; }
.reduced { color: white; background-color: #f8961e; }
```
--------------------------------
### Create a Reusable Seatchart React Component
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
This TypeScript/React component wraps the Seatchart.js library, allowing it to be used declaratively within a React application. It uses `useEffect` for lifecycle management to initialize and clean up the Seatchart instance, and `forwardRef` to expose the Seatchart instance to parent components.
```TypeScript
// Seatchart.tsx
import React, { forwardRef, useEffect, useRef } from 'react';
import SeatchartJS, { Options } from 'seatchart';
interface SeatchartProps {
options: Options;
}
function setForwardedRef(ref: React.ForwardedRef, value: T) {
if (typeof ref === 'function') {
ref(value);
} else if (ref) {
ref.current = value;
}
};
const Seatchart = forwardRef(({ options }, ref) => {
const seatchartRef = useRef();
const elementRef = useRef(null);
useEffect(() => {
if (elementRef.current && !seatchartRef.current) {
seatchartRef.current = new SeatchartJS(elementRef.current, options);
setForwardedRef(ref, seatchartRef.current);
return () => {
seatchartRef.current = undefined;
setForwardedRef(ref, undefined);
};
}
}, []);
return (
);
});
export default Seatchart;
```
--------------------------------
### Custom CSS for Seatchart Seat Types
Source: https://github.com/omahili/seatchart.js/blob/master/README.md
This CSS snippet defines a style for the 'economy' seat type, applying a specific background color and text color. This class is referenced in the Seatchart options to visually distinguish seat types.
```CSS
/* App.css */
.economy {
color: white;
background-color: #43aa8b;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.