Usage

Seat Picker is flexible and can be used out-of-the-box or fully customized. Here are the most common usage scenarios:

1. Basic Usage (No Customization)

Just import and use SeatPicker for a fully interactive editor with default styles and labels.

App.tsx

typescript

2. Customizing Styles

Override canvas, seat, and label styles using the style prop.

App.tsx

tsx

3. Customizing Labels

Override any button or field text for localization or branding.

App.tsx

tsx

4. Custom Toolbar, Sidebar, or Modal

You can fully replace the toolbar, sidebar, or seat details modal with your own React components.

App.tsx

tsx

5. Read-Only Customer Viewer

Show a seat map for customers to view and purchase, but not edit.

CustomerView.tsx

tsx

Advanced Usage

Take Seat Picker further with advanced features and real-world integrations.

1. Import/Export Layouts

Save and load seat layouts as JSON for backup or sharing.

import-export.js

javascript

2. Bulk Editing

Edit properties for multiple selected seats at once.

bulk-edit.js

javascript

3. Zone Management

Group seats into zones for pricing or sectioning.

App.tsx

tsx

4. Backend Integration

Save and load layouts from your backend or database.

backend.js

javascript

5. Custom Seat Actions

Handle custom actions like buy, reserve, etc.

App.tsx

tsx

6. Keyboard Shortcuts

Use built-in shortcuts for undo, redo, delete, multi-select, and command palette.

shortcuts.txt

text

7. Composing with Other UI

Combine SeatPicker with modals, notifications, or other UI libraries.

ModalExample.tsx

tsx

Customer Viewer

Show a seat map for customers to view and purchase, but not edit. Upload a layout, show seat details, and handle purchase actions.

Read-Only Viewer Example

CustomerView.tsx

tsx

API Reference

All available props for SeatPicker and how to use them.

Prop	Type	Default	Description
width	number	800	Canvas width in pixels
height	number	600	Canvas height in pixels
layout	object	—	(Optional) Layout JSON to load (for editing an existing layout)
onChange	(layout: object) => void	—	Callback when the layout changes (add, move, edit, delete, etc.)
onSave	(layout: object) => void	—	Callback when the user clicks the Save button
onZoneChange	(zones: Zone[]) => void	—	Callback when zones change
className	string	—	Additional CSS class name for the root container
style	object	—	Additional inline styles or style overrides
labels	object	—	Override default button/label text
readOnly	boolean	false	If true, disables all editing and only allows viewing
renderToolbar	(props) => ReactNode	—	Custom render function for the toolbar
renderSidebar	() => ReactNode	—	Custom render function for the sidebar
renderSeatDetails	({(seat, onClose, onAction)}) => ReactNode	—	Custom render function for the seat details modal
onSeatClick	(seat: SeatData) => void	—	Callback when a seat is clicked (read-only mode)
onSeatAction	(action: string, seat: SeatData) => void	—	Callback for seat actions (e.g., buy, reserve)

Advanced Prop Usage

App.tsx

tsx

PreviousGetting Started

NextPlayground