@seatsio/seatsio-react

seatsio-react, the official Seats.io React SDK

React wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.

Installation

npm install --save @seatsio/seatsio-react

Usage

Note If you're using seatsio-react in a Next.js project, ensure you use the 'use client' directive to force client-side rendering.

Regular charts

Minimal

import { SeatsioSeatingChart } from '@seatsio/seatsio-react';

<div style={{ 'height': '500px' }}>
    <SeatsioSeatingChart
        workspaceKey="<yourPublicWorkspaceKey>"
        event="<yourEventKey>"
        region="<yourRegion>"
    />
</div>

The chart uses 100% of the width and height of the DOM element (e.g. a div) in which you render it. Play with the size of that element to change the chart size.

TypeScript

@seatsio/seatsio-react exposes type definitions from @seatsio/seatsio-types. You can import them as follows:

import { SeatsioSeatingChart, Pricing } from "@seatsio/seatsio-react";

const pricing: Pricing = [
    { category: '1', price: 30},
    { category: '2', price: 40}
]

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    pricing={pricing}
    region="<yourRegion>"
/>

Areas have different properties than seats or tables. To distinguish between them, you can use the objectType property:

onObjectSelected: (object) => {
    if(object.objectType === 'GeneralAdmissionArea') {
        console.log(`I am an area with ${object.numSelected} selected places`)
    } else {
        console.log('I am a seat, booth or table')
    }
}

onRenderStarted()

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

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="<yourRegion>"
    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
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="<yourRegion>"
    onRenderStarted={createdChart => { chart = createdChart }}
/>

...

console.log(chart.selectedObjects);

onChartRendered()

onChartRendered is fired when the chart is rendered successfully:

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="<yourRegion>"
    onChartRendered={chart => { ... }}
/>

Keeping track of selected objects

const chartRef = useRef<SeatingChart | null>(null);
const [selection, setSelection] = useState<SelectableObject[]>([]);

...

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="<yourRegion>"
    onChartRendered={(chart) => (chartRef.current = chart)}
    onObjectSelected={async () => setSelection(await chartRef.current!.listSelectedObjects())}
    onObjectDeselected={async () => setSelection(await chartRef.current!.listSelectedObjects())}
/>

...

<p>{JSON.stringify(selection.map((o) => o.labels.displayedLabel))}</p>

Supported properties

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

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

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';

<div style={{ 'height': '500px' }}>
    <SeatsioEventManager
        secretKey="<yourWorkspaceSecretKey>"
        event="<yourEventKey>"
        mode="<manageObjectStatuses or another mode>"
        region="<yourRegion>"
    />
</div>

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

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';

<div style={{ 'height': '500px' }}>
    <SeatsioDesigner
        secretKey="<yourWorkspaceSecretKey>"
        region="<yourRegion>"
    />
</div>

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

<SeatsioDesigner
    secretKey="<yourWorkspaceSecretKey>"    
    chartKey="<yourChartKey>"
    region="<yourRegion>"
/>

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