🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@seatsio/seatsio-react

Package Overview
Dependencies
Maintainers
4
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@seatsio/seatsio-react

React wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.

15.14.0
latest
Source
npm
Version published
Weekly downloads
6.4K
-13.27%
Maintainers
4
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 04 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts