
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
@seatsio/seatsio-react
Advanced tools
React wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.
React wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.
npm install --save @seatsio/seatsio-react
Note If you're using seatsio-react in a Next.js project, ensure you use the 'use client'
directive to force client-side rendering.
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.
@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
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
is fired when the chart is rendered successfully:
<SeatsioSeatingChart
workspaceKey="<yourPublicWorkspaceKey>"
event="<yourEventKey>"
region="<yourRegion>"
onChartRendered={chart => { ... }}
/>
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>
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.
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
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
React wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.
The npm package @seatsio/seatsio-react receives a total of 5,159 weekly downloads. As such, @seatsio/seatsio-react popularity was classified as popular.
We found that @seatsio/seatsio-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
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.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.