README
seatsio-react, the official Seats.io React wrapper
React wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.
Installation
npm install --save @seatsio/seatsio-react
Usage
Regular charts
Minimal
import { SeatsioSeatingChart } from '@seatsio/seatsio-react'
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
region="eu"
/>
Setting the height of the chart
By default, <SeatsioSeatingChart>
is as wide as its parent div, and as high as the drawing that's rendered.
To set an explicit height, use CSS on the div that gets created by <SeatsioSeatingChart>
:
#chart {
height: 800px; // or height: 100%, or height: 100vh, depending on your requirements
}
Custom chart div ID
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
id="<theChartDivID>"
region="eu"
/>
Custom chart div class
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
className="<theChartDivClassName>"
region="eu"
/>
onRenderStarted()
onRenderStarted
is fired when the chart has started loading, but hasn't rendered yet:
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
onRenderStarted={chart => { ... }}
region="eu"
/>
If you store the chart object that's passed to onRenderStarted
, you can access the properties defined on the wrapped seatsio.SeatingChart
:
let chart = null;
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
onRenderStarted={createdChart => { chart = createdChart }}
region="eu"
/>
...
console.log(chart.selectedObjects);
onChartRendered()
onChartRendered
is fired when the chart is rendered successfully:
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
onChartRendered={chart => { ... }}
region="eu"
/>
Supported properties
Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer-configure-your-floor-plan
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
pricing={[
{'category': 1, 'price': 30},
{'category': 2, 'price': 40},
{'category': 3, 'price': 50}
]}
priceFormatter={price => '