seatmap-painter

React-based UI tools for creating and painting groups on a provided SVG seatmap.

This package includes:

• SeatmapPainter: Divide an SVG seatmap into groups based on a provided array of name/color pairs

• GroupMaker: An extension of SeatmapPainter with an interface for creating groups alongside the seatmap

Check it out here: Storybook

Installation

Install the package via NPM:

npm install --save seatmap-painter

Usage

SeatmapPainter

import { useState } from "react";
import { SeatmapPainter, GroupedSeats } from "seatmap-painter";

export function default () {
  const [groupedSeats, setGroupedSeats] = useState<GroupedSeats>({});

  const groups = [
    {
      value: "stalls", // Used as the key for this group in the groupedSeats object
      label: "Stalls", // Displayed as the name of this group in the UI
      color: "#ef857d", // Used to highlight this group on the seatmap
    },
  ];

  return (
    <SeatmapPainter
      svg="https://www.test.com/svg" // The URL of the SVG to use as the basis for the seatmap
      value={groupedSeats}
      onChange={setGroupedSeats}
      groups={groups}
    />
  );
};

GroupMaker

import { GroupMaker } from "seatmap-painter";

export default () => (
  <GroupMaker
    svg="https://www.test.com/svg" // The URL of the SVG to use as the basis for the seatmap
  />
);

Props

Grouped Seats

Name	Type	Description
value	string	The unique key of the group. All seats selected for this group will be listed under this key in the object returned from onChange in SeatmapPainter
label	string	The name for this group that should be shown in the UI
color	string	The color that will be used to represent seats in this group on the seatmap

SeatmapPainter

Name	Type	Description
svg	string	URL for an svg to render as the seatmap
value	GroupedSeats	The GroupedSeats object representing the current combination of groups and seats. Since this is a controlled component, this prop controls which group each seat is considered to be in, and so should be stored in state.
onChange	(GroupedSeats) => void	Function that is run when the user changes the seat grouping. Since this is a controlled component, the function argument is the new "value" for the component.

GroupMaker

Name	Type	Description
svg	string	URL for an svg to render as the seatmap

License

MIT Licence