react-seat-charts v0.1.14

React Seat Charts

React Seat Charts is a library powered by React to create interactive seat selectors.

Example

Installation

To install, use npm:

$ npm install react-seat-charts

Usage

Import and render a SeatingChart component:

import React from "react";
import { SeatingChart } from 'react-seat-charts';

export default class App extends React.Component {
  render() {
  	// SeatingChart requires a double nested array of seat objects
	let seats = [ [{seatType: "regular", status: "available", label: "5"}],
				  [{seatType: "spacer"}] ];
	
	// Naming is optional
	let naming = { rows: ["A"], columns: ["1"]};
    
    // Let there be seats
    let seatingChart = <SeatingChart seats={seats} naming={naming}/>;
    return <div>{seatingChart}</div>;
  }
}

This renders to:

<div>
	<div class="seatChart-container">
		<div class="seatChart-row">
			<div class="seatChart-cell">
				<div class="seatChart-seat regular available">5</div>
			</div>
		</div>
		<div class="seatChart-row">
			<div class="seatChart-cell seatChart-spacer"></div>
		</div>
	</div>
</div>

See the Wiki for more information about the components included.