### Install seatsio-react SDK

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Installs the official Seats.io React SDK using npm. This is the first step to integrating Seats.io seating charts into your React application.

```bash
npm install --save @seatsio/seatsio-react
```

--------------------------------

### Create New Charts with SeatsioDesigner in React

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This example shows how to embed the `SeatsioDesigner` component to create new venue layouts from scratch within a React application. It only requires `workspaceKey` and `region` credentials for initialization. The component is provided by the `@seatsio/seatsio-react` package.

```jsx
import { SeatsioDesigner } from '@seatsio/seatsio-react';

function CreateVenue() {
  return (
    <div style={{ height: '700px', width: '100%' }}>
      <SeatsioDesigner
        secretKey="yourWorkspaceSecretKey"
        region="eu"
      />
    </div>
  );
}
```

--------------------------------

### Using onRenderStarted Callback (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Shows how to use the `onRenderStarted` callback in `SeatsioSeatingChart`. This callback fires when the chart begins loading. The example demonstrates storing the chart object for later access to properties like `selectedObjects`.

```jsx
let chart = null;

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="<yourRegion>"
    onRenderStarted={createdChart => { chart = createdChart }}
/>

... 

console.log(chart.selectedObjects);
```

--------------------------------

### Handle Chart Lifecycle with onRenderStarted and onChartRendered Callbacks

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This snippet demonstrates how to use `onRenderStarted` and `onChartRendered` callbacks to access the chart instance during different phases of its lifecycle. It logs messages when the chart starts loading and when it's fully rendered, also logging available categories upon rendering. It requires the `@seatsio/seatsio-react` and `@seatsio/seatsio-types` packages.

```jsx
import { SeatsioSeatingChart } from '@seatsio/seatsio-react';
import { SeatingChart } from '@seatsio/seatsio-types';
import { useState } from 'react';

function ChartLifecycle() {
  const [chart, setChart] = useState<SeatingChart | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div style={{ height: '500px' }}>
      {isLoading && <div>Loading chart...</div>}
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="venueEvent"
        region="eu"
        onRenderStarted={(chart) => {
          console.log('Chart starting to load');
          setChart(chart);
        }}
        onChartRendered={(chart) => {
          console.log('Chart fully rendered');
          console.log('Available objects:', chart.listCategories());
          setIsLoading(false);
        }}
      />
    </div>
  );
}
```

--------------------------------

### Tracking Selections with Refs and State (React)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

An advanced example using React's `useRef` and `useState` hooks to keep track of selected objects in a `SeatsioSeatingChart`. It updates the `selection` state whenever objects are selected or deselected, and displays the labels of selected objects.

```javascript
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>
```

--------------------------------

### Dynamically Switch Chart Color Schemes in React

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This example shows how to dynamically change the appearance of a Seats.io chart using the `colorScheme` prop. Changing the state of `colorScheme` (e.g., via a select dropdown) will automatically trigger a re-render of the chart with the new theme. It utilizes the `SeatsioSeatingChart` component from `@seatsio/seatsio-react`.

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

type ColorScheme = 'light' | 'dark';

function ThemedChart() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');

  return (
    <div className={`container ${colorScheme}`}>
      <select
        onChange={(e) => setColorScheme(e.target.value as ColorScheme)}
        value={colorScheme}
      >
        <option value="light">Light Theme</option>
        <option value="dark">Dark Theme</option>
      </select>
      <div style={{ height: '500px' }}>
        <SeatsioSeatingChart
          workspaceKey="publicDemoKey"
          event="styledEvent"
          region="eu"
          colorScheme={colorScheme}
        />
      </div>
    </div>
  );
}
```

--------------------------------

### Handling Object Types in onObjectSelected (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

An example of the `onObjectSelected` callback function for `SeatsioSeatingChart`. It checks the `objectType` property to differentiate between general admission areas and other objects like seats or tables, logging different messages based on the type.

```jsx
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')
    }
}
```

--------------------------------

### Configure Custom CDN URL for Seats.io Chart in React

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This example illustrates how to override the default CDN URL for the Seats.io JavaScript library using the `chartJsUrl` prop. This is useful for staging environments or self-hosted deployments. The `{region}` placeholder can be used for automatic substitution based on the specified region. It uses the `SeatsioSeatingChart` component.

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

function StagingChart() {
  return (
    <div style={{ height: '500px' }}>
      <SeatsioSeatingChart
        workspaceKey="stagingKey"
        event="testEvent"
        region="eu"
        chartJsUrl="https://cdn-staging-{region}.seatsio.net/chart.js"
      />
    </div>
  );
}
```

--------------------------------

### SeatsioSeatingChart with Pricing (TypeScript)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Demonstrates using `SeatsioSeatingChart` with TypeScript, including defining pricing tiers. It imports `SeatsioSeatingChart` and `Pricing` types and applies a pricing configuration to the chart.

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

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

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

--------------------------------

### Render Basic Seating Chart with SeatsioSeatingChart

Source: https://context7.com/seatsio/seatsio-react/llms.txt

Creates a basic interactive seating chart component with workspace credentials and event identifier. The component fills its container div and requires height/width styling. Supports region-based CDN selection via the region prop.

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

function App() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="myEventKey"
        region="eu"
      />
    </div>
  );
}
```

--------------------------------

### Configure Ticket Pricing by Category in Seating Chart

Source: https://context7.com/seatsio/seatsio-react/llms.txt

Implements category-based pricing with custom price formatting in the seating chart. The pricing prop accepts an array of category-price mappings and an optional formatter function for display customization. Enables dynamic pricing display during seat selection.

```jsx
import { SeatsioSeatingChart, Pricing } from '@seatsio/seatsio-react';

const pricing: Pricing = {
  priceFormatter: (price) => '$' + price.toFixed(2),
  prices: [
    { category: 'VIP', price: 150 },
    { category: 'Premium', price: 100 },
    { category: 'Standard', price: 50 }
  ]
};

function TicketPurchase() {
  return (
    <div style={{ height: '600px' }}>
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="concertEvent"
        region="na"
        pricing={pricing}
      />
    </div>
  );
}
```

--------------------------------

### SeatsioSeatingChart with Custom Pricing (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Configures `SeatsioSeatingChart` with custom pricing options, including a `priceFormatter` to customize currency display and specific prices for different categories. This demonstrates advanced customization of pricing within the seating chart.

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

--------------------------------

### Minimal SeatsioSeatingChart Usage (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Renders a basic Seats.io seating chart using the `SeatsioSeatingChart` component. Requires `workspaceKey`, `event`, and `region` to be provided. The chart will occupy the full width and height of its parent DOM element.

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

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

--------------------------------

### Integrate Seats.io Chart in Next.js with Client-Side Rendering

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This snippet shows how to integrate the Seats.io chart into a Next.js application. It uses the `'use client'` directive to ensure the component renders only on the client-side, as it relies on browser APIs. The `SeatsioSeatingChart` component is imported from `@seatsio/seatsio-react`.

```jsx
'use client'

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

export default function NextJsSeatingPage() {
  return (
    <div style={{ height: '500px' }}>
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="nextJsEvent"
        region="na"
      />
    </div>
  );
}
```

--------------------------------

### Basic SeatsioEventManager Usage (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Renders the `SeatsioEventManager` component, which is used for managing seating chart events. It requires `secretKey`, `event`, `mode`, and `region` parameters to function.

```jsx
import { SeatsioEventManager } from '@seatsio/seatsio-react';

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

--------------------------------

### Edit Existing Charts with SeatsioDesigner in React

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This code snippet demonstrates how to use the `SeatsioDesigner` component to load and edit an existing venue layout by providing a `chartKey`. Changes made in the designer are automatically saved to your Seats.io workspace. It requires `secretKey`, `chartKey`, and `region`.

```jsx
import { SeatsioDesigner } from '@seatsio/seatsio-react';

function EditVenue() {
  const chartKey = "existingVenueChart";

  return (
    <div>
      <h2>Edit Venue Layout: {chartKey}</h2>
      <div style={{ height: '700px', width: '100%' }}>
        <SeatsioDesigner
          secretKey="yourWorkspaceSecretKey"
          chartKey={chartKey}
          region="eu"
        />
      </div>
    </div>
  );
}
```

--------------------------------

### Track Selected Objects with Refs and Callbacks

Source: https://context7.com/seatsio/seatsio-react/llms.txt

Accesses real-time seat selection using React refs and callback props. The onChartRendered callback provides the chart instance, while onObjectSelected and onObjectDeselected callbacks trigger on selection changes. Demonstrates storing selected seats in component state for display.

```jsx
import { SeatsioSeatingChart, Region } from '@seatsio/seatsio-react';
import { SeatingChart, SelectableObject } from '@seatsio/seatsio-types';
import { useRef, useState } from 'react';

function SeatSelector() {
  const chartRef = useRef<SeatingChart | null>(null);
  const [selection, setSelection] = useState<SelectableObject[]>([]);
  const region: Region = 'eu';

  const updateSelection = async () => {
    if (chartRef.current) {
      const selected = await chartRef.current.listSelectedObjects();
      setSelection(selected);
    }
  };

  return (
    <div>
      <div style={{ height: '500px' }}>
        <SeatsioSeatingChart
          workspaceKey="publicDemoKey"
          event="theatreEvent"
          region={region}
          onChartRendered={(chart) => (chartRef.current = chart)}
          onObjectSelected={updateSelection}
          onObjectDeselected={updateSelection}
        />
      </div>
      <div>
        <h3>Selected Seats:</h3>
        <p>{selection.map((obj) => obj.labels.displayedLabel).join(', ')}</p>
      </div>
    </div>
  );
}
```

--------------------------------

### Using onChartRendered Callback (JSX)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Illustrates the use of the `onChartRendered` callback for `SeatsioSeatingChart`. This function is executed once the seating chart has been successfully rendered, allowing for post-render operations.

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

--------------------------------

### Manage Events with SeatsioEventManager in React

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This snippet integrates the `SeatsioEventManager` component for administrative tasks such as managing seating, object statuses, and bookings. It requires a `secretKey` for authentication and supports different management modes, specified via the `mode` prop. The component is imported from `@seatsio/seatsio-react`.

```jsx
import { SeatsioEventManager } from '@seatsio/seatsio-react';

function AdminPanel() {
  return (
    <div style={{ height: '600px', width: '100%' }}>
      <SeatsioEventManager
        secretKey="yourWorkspaceSecretKey"
        event="eventKey"
        mode="manageObjectStatuses"
        region="eu"
      />
    </div>
  );
}
```

--------------------------------

### Embed Seats.io Designer to Create New Chart (React)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Embeds the Seats.io Seating Chart Designer to allow users to create a new chart. Requires the Seats.io React component and workspace secret key. The designer is rendered within a div with a specified height.

```jsx
import { SeatsioDesigner } from '@seatsio/seatsio-react';

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

--------------------------------

### Embed Seats.io Designer to Edit Existing Chart (React)

Source: https://github.com/seatsio/seatsio-react/blob/master/README.md

Embeds the Seats.io Seating Chart Designer to allow users to edit an existing chart. Requires the Seats.io React component, workspace secret key, and the specific chart key. Other parameters are also supported.

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

--------------------------------

### TypeScript Type Guards for Seatsio React Objects

Source: https://context7.com/seatsio/seatsio-react/llms.txt

This code snippet demonstrates how to use imported type guard functions (isSeat, isTable, isBooth, isGeneralAdmission) to safely determine the type of a selectable object received from the SeatsioSeatingChart component. It uses these guards to perform specific actions based on the object's type, ensuring type safety within the React component.

```tsx
import { SeatsioSeatingChart, isSeat, isTable, isBooth, isGeneralAdmission } from '@seatsio/seatsio-react';
import { SelectableObject } from '@seatsio/seatsio-types';

function TypeSafeHandler() {
  const handleSelection = (object: SelectableObject) => {
    if (isSeat(object)) {
      // TypeScript knows this is a Seat
      console.log(`Seat ${object.labels.own} in row ${object.labels.parent}`);
    } else if (isTable(object)) {
      // TypeScript knows this is a Table
      console.log(`Table with ${object.capacity} seats`);
    } else if (isBooth(object)) {
      // TypeScript knows this is a Booth
      console.log(`Booth: ${object.labels.displayedLabel}`);
    } else if (isGeneralAdmission(object)) {
      // TypeScript knows this is a GeneralAdmissionArea
      console.log(`GA area with ${object.numSelected}/${object.capacity} selected`);
    }
  };

  return (
    <div style={{ height: '500px' }}>
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="mixedEvent"
        region="eu"
        onObjectSelected={handleSelection}
      />
    </div>
  );
}

```

--------------------------------

### Distinguish Object Types with Type Guards in Selection Handler

Source: https://context7.com/seatsio/seatsio-react/llms.txt

Handles different seating object types (GeneralAdmissionArea, Seat, Table, Booth) using TypeScript type guards. Each object type has distinct properties for handling business logic. Enables type-specific responses to selected objects in the seating chart.

```jsx
import { SeatsioSeatingChart } from '@seatsio/seatsio-react';
import { SelectableObject } from '@seatsio/seatsio-types';

function EventBooking() {
  const handleObjectSelected = (object: SelectableObject) => {
    if (object.objectType === 'GeneralAdmissionArea') {
      console.log(`GA Area: ${object.labels.displayedLabel}`);
      console.log(`Selected places: ${object.numSelected}`);
    } else if (object.objectType === 'Seat') {
      console.log(`Seat: ${object.labels.displayedLabel}`);
      console.log(`Category: ${object.category?.label}`);
    } else if (object.objectType === 'Table') {
      console.log(`Table: ${object.labels.displayedLabel}`);
      console.log(`Capacity: ${object.capacity}`);
    }
  };

  return (
    <div style={{ height: '500px' }}>
      <SeatsioSeatingChart
        workspaceKey="publicDemoKey"
        event="multiTypeEvent"
        region="eu"
        onObjectSelected={handleObjectSelected}
      />
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.