ref={containerRef}
style={{ width: '600px', height: '400px', border: '1px solid #ccc' }}
/>
)
}
`

$3

`tsx
import React, { useState, useEffect } from 'react'
import { flattenSeatMap, toSvgString, mountVanillaSeatMap } from '@metrixlabs/seatmap-renderer'

const ConstructorIntegration: React.FC = () => {
const [seatMapData, setSeatMapData] = useState(null)

// Complex data structure from constructor
const complexData = {
entities: {
'sector1': {
id: 'sector1',
entityKey: 'seatedSector',
name: 'VIP Section',
x: 100, y: 100,
sector: 'vip',
rowPitch: 30, seatPitch: 25,
rowIds: ['row1', 'row2']
}
},
rows: {
'row1': { id: 'row1', title: 'Row A', seatCount: 5, index: 0 },
'row2': { id: 'row2', title: 'Row B', seatCount: 5, index: 1 }
},
sectors: [
{ id: 'vip', name: 'VIP', color: '#ff6b6b', price: 100 }
]
}

useEffect(() => {
const flattened = flattenSeatMap(complexData)
setSeatMapData(flattened)
}, [])

const handleExport = () => {
if (seatMapData) {
const svg = toSvgString(seatMapData)
// Download or display SVG
}
}

return (



)
}
`

📖 For complete React examples, see REACT_USAGE_EXAMPLES.md

API Reference

$3

Generates an SVG string representation of the seat map.

Options:
- data: SeatMapData - The seat map data
- seatRadius?: number - Seat circle radius (default: 8)
- width?: string | number - SVG width (default: '100%')
- height?: string | number - SVG height (default: '100%')
- padding?: number - ViewBox padding (default: 24)
- classNameForSeat?: (seat: SeatGlyph) => string - Custom CSS class function
- getSeatFill?: (seat: SeatGlyph, sector?: Sector) => string - Custom fill color function
- a11yLabel?: (seat: SeatGlyph, sector?: Sector) => string - Custom accessibility label function

$3

Mounts an interactive seat map in a DOM element.

Options:
- target: HTMLElement - Target DOM element
- data: SeatMapData - The seat map data
- seatRadius?: number - Seat circle radius
- padding?: number - ViewBox padding
- onSeatClick?: (seatId: string, meta: DOMStringMap, event: MouseEvent) => void - Click handler
- onSeatHover?: (seatId: string | null, meta: DOMStringMap | null, event: PointerEvent) => void - Hover handler
- a11y?: { enableKeyboard?: boolean } - Accessibility options (default: true)
- classNameForSeat?: (seat: SeatGlyph) => string - Custom CSS class function
- getSeatFill?: (seat: SeatGlyph, sector?: Sector) => string - Custom fill color function

Returns: { el: SVGSVGElement, destroy(): void }

$3

Converts editor JSON data to the renderable format.

Parameters:
- editorJson: any - The editor state JSON
- options?: { seatRadius?: number } - Conversion options

Returns: SeatGlyph[]

$3

Computes the optimal SVG viewBox for the given seats.

Parameters:
- seats: SeatGlyph[] - Array of seat glyphs
- padding?: number - Padding around the seats (default: 24)

Returns: { minX: number, minY: number, width: number, height: number }

Types

$3

`typescript
type SeatGlyph = {
id: string; // Unique identifier
x: number; // X coordinate
y: number; // Y coordinate
r?: number; // Radius (default: 8)
rowId: string; // Row identifier
rowTitle?: string; // Row display name
localIndex: number; // Seat index within row
entityId: string; // Entity identifier
sectorId?: string; // Sector identifier
price?: number; // Seat price
currency?: string; // Price currency
[k: string]: unknown; // Additional metadata
}
`

$3

`typescript
type Sector = {
id: string; // Sector identifier
color?: string; // CSS color
price?: number; // Default price
currency?: string; // Price currency
}
`

$3

`typescript
type SeatMapData = {
seats: SeatGlyph[]; // Array of seats
sectors?: Sector[]; // Array of sectors
meta?: Record; // Additional metadata
}
``

Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request