@alisaitteke/seatmap-canvas-react

Seatmap Canvas - React

This is the ReactJS implementation of the original seatmap-canvas library, an open-source tool designed for interactive seat selection in various environments like stadiums, theaters, and event venues. Leveraging the capabilities of React and d3.js, this library provides a flexible and efficient solution for managing seat arrangements.

Features

• React Integration: Designed specifically for React projects, offering a streamlined development experience.
• Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.
• Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.
• Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.
• Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.
• Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.

Planned

• Vue Integration: Designed specifically for Vue or Nuxt projects, offering a streamlined development experience.
• Angular Integration: Designed specifically for Angular projects, offering a streamlined development experience.

LIVE DEMO

Installation

npm i @alisaitteke/seatmap-canvas-react --save
OR
yarn add @alisaitteke/seatmap-canvas-react --save

Usage

const seatmapRef = React.createRef();

<Seatmap 
    className="w-full flex-1 h-full" 
    ref={seatmapRef} 
    seatClick={seatClick} 
    blocks={blocks} 
    config={config}>
</Seatmap>

Config

const config = {
    legend: true,
    style: {
        seat: {
            hover: '#8fe100',
            color: '#f0f7fa',
            selected: '#8fe100',
            check_icon_color: '#fff',
            not_salable: '#0088d3',
            focus: '#8fe100',
        },
        legend: {
            font_color: '#3b3b3b',
            show: false
        },
        block: {
            title_color: '#fff'
        }
    }
}

API

Zoom To Block

seatmapRef.current.zoomManager.zoomToBlock(blockId)

Get Selected Seats

const selectedSeats = seatmapRef.current.getSelectedSeats()

Seat Click Handler

const seatClick = (seat) => {
    if (!seat.isSelected() && seat.item.salable === true) {
        seat.select()
    } else {
        seat.unSelect()
    }
}

Component Example

import React from 'react';
import SeatmapCanvas from '@alisaitteke/seatmap-canvas';

const MySeatmap = () => {
    const config = {
        // Your CONFIG here
    };

    let blocks = [
        // Your BLOCK_DATA here
    ]

    const seatClick = (seat) => {
        if (!seat.isSelected() && seat.item.salable === true) {
            seat.select()   // Set select seat
        } else {
            seat.unSelect() // Unselect seat
        }
    }

    return (
        <Seatmap
            className="w-full flex-1 h-full"
            ref={seatmapRef}
            seatClick={seatClick}
            blocks={blocks}
            config={config}>
        </Seatmap>
    );
};

export default MySeatmap;

Contributors

Ali Sait TEKE [e-mail]