React UI library to design and render seat layouts. The library is still under active development and not yet ready for production use until the next major release (v1.0.0).
-
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 🛠️
-
Preview: Preview the layout in a separate window 🛠️
-
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 🛠️
Run bun i @mezh-hq/react-seat-toolkit
to incorporate into your project
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;
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;
Please read CONTRIBUTING.md for details on setting up your development environment and the process of submitting pull requests to us.