@mezh-hq/react-seat-toolkit

React Seat Toolkit

---

React UI library to design and render seat layouts.

Storybook: https://mezh-hq.github.io

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 together 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 ✓
    • Add and move around booths ✓
    • Multiple element selection and deselection ✓
    • 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 @mezh-hq/react-seat-toolkit to incorporate into your project

Usage

User mode

import React from "react";
import SeatToolkit from "@mezh-hq/react-seat-toolkit";
import "@mezh-hq/react-seat-toolkit/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 "@mezh-hq/react-seat-toolkit";
import "@mezh-hq/react-seat-toolkit/styles";

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

export default App;

Contributing

Please read CONTRIBUTING.md for details on setting up your development environment and the process of submitting pull requests to us.