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
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
/>

Custom chart div ID

<SeatsioSeatingChart
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    id="<theChartDivID>"
/>

Custom chart div class

<SeatsioSeatingChart
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    className="<theChartDivClassName>"
/>

onRenderStarted()

onRenderStarted is fired when the chart has started loading, but hasn't rendered yet:

<SeatsioSeatingChart
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    onRenderStarted={chart => { ... }}
/>

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
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    onRenderStarted={createdChart => { chart = createdChart }}
/>

...

console.log(chart.selectedObjects);

onChartRendered()

onChartRendered is fired when the chart is rendered successfully:

<SeatsioSeatingChart
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    onChartRendered={chart => { ... }}
/>

Supported properties

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer-configure-your-floor-plan

<SeatsioSeatingChart
    publicKey="<yourPublicKey>"
    event="<yourEventKey>"
    pricing={[
        {'category': 1, 'price': 30},
        {'category': 2, 'price': 40},
        {'category': 3, 'price': 50}
    ]}
    priceFormatter={price => '$' + price}
/>

Whenever one of the properties passed on to <SeatsioSeatingChart /> changes, the chart destroys itself and rerenders. To avoid such a 'full refresh', you can use chart.changeConfig() instead of updating the properties directly. Please check https://docs.seats.io/docs/renderer-chart-properties-chartchangeconfig. Note that changeConfig() only supports a subset of all available chart parameters.

Event manager

import { SeatsioEventManager } from '@seatsio/seatsio-react'

<SeatsioEventManager
    secretKey="<yourSecretKey>"
    event="<yourEventKey>"
    mode="<manageObjectStatuses or another mode>"
/>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/configuring-event-manager

Chart manager

import { SeatsioChartManager } from '@seatsio/seatsio-react'

<SeatsioChartManager
    secretKey="<yourSecretKey>"
    workspaceKey="<yourWorkspaceKey>"
    chart="<yourChartKey>"
    mode="<manageRulesets or another mode>"
/>

Seating Chart Designer

To embed the seating chart designer for the purpose of creating a new chart, do this:

import { SeatsioDesigner } from '@seatsio/seatsio-react'

<SeatsioDesigner
    designerKey="<yourDesignerKey>"    
/>

To be able to edit a chart from an embedded designer, you need to specify the chart to load:

<SeatsioDesigner
    designerKey="<yourDesignerKey>"
    chartKey="<yourChartKey>"    
/>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer-configuration