Seat Layout

Internal Notice

This package is an internal, modified fork of the open-source project @mezh-hq/react-seat-toolkit.

It has been customized for internal use by Library Logix. Original license and authorship are preserved as required.

React UI library to design and render seat layouts.

Features

• JSON based: Define your seat layout using JSON data and retrieve it back as JSON after customization ✓

• Customizable: Customize the layout as per your requirements

  • Seats

    • Add new seats ✓
    • Remove existing seats ✓
    • Change seat colors ✓
    • Change seat labels ✓
    • Change seat status ✓
    • Group seats into categories ✓
    • Categorizer (Manage seat categories) ✓

  • Pen

    • Draw on the layout using a pen tool to create custom shapes ✓

  • Text

    • Add text to the layout ✓
    • Change text color ✓
    • Change text size ✓
    • Change text font weight ✓

  • Shapes

    • Add shapes to the layout ✓
    • Change shape color ✓
    • Change shape size ✓
    • Change shape border color ✓

  • Sections

    • Section manager ✓
    • Free seating sections ✓

  • Miscallaneous

    • Add, move around and scale background images ✓
    • Multiple element selection and deselection ✓
    • Rotate elements ✓
    • Bring elements to front or back ✓

• Responsive: The layout is responsive and can be viewed on any device ✓

• Designer mode and User mode: Switch between designer and user mode to enable or disable customization ✓

• Custom styles: Override the default styles to match your application's theme ✓

Installation

Run bun i @library-logix/seat-layout to incorporate into your project

Usage

User mode

import React from "react";
import SeatToolkit from "@library-logix/seat-layout";
import "@library-logix/seat-layout/styles";

const App = () => {
  const data = {
    seats: [
      {
        id: "1",
        x: 100,
        y: 100,
        label: "A1",
        color: "blue"
      }
    ]
  };
  return (
    <SeatToolkit
      mode="user"
      data={data}
      events={{
        onSeatClick: (seat) => {
          console.log(seat);
        },
        onSectionClick: (section) => {
          console.log(section);
        }
      }}
    />
  );
};

export default App;

Designer mode

import React from "react";
import SeatToolkit from "@library-logix/seat-layout";
import "@library-logix/seat-layout/styles";

const App = () => {
  return (
    <SeatToolkit
      mode="designer"
      events={{
        onExport: (data) => {
          console.log(data);
        }
      }}
    />
  );
};

export default App;

Note: If you're using the toolkit in a Next.js project, you probably will need to dynamically import the toolkit to avoid SSR issues.