react-svg-seatmap

React components that render a highly-customizable seatmap based on a provided SVG.

This package includes:

• SeatmapInput: Use an SVG seatmap as a controlled component for choosing seats
• SeatmapAccordion: Use an SVG seatmap as a navigational tool for showing seat details

Check it out here: Storybook

Features

• Use custom icons and colors to group seats
• Pan and zoom functionality
• Select all seats in a group at once
• Drag to quickly multiple seats

Installation

Install the package via NPM:

npm install --save react-svg-seatmap

Usage

SeatmapInput

import { useState } from "react";
import { SeatmapInput } from "react-svg-seatmap";

export default () => {
  const [selectedSeats, setSelectedSeats] = useState<number[]>([]);

  const svgUrl = "https://www.test.com/svg";

  const seats = [
    {
      id: 1,
      cssSelector: "#seat-1-1-1", // The query selector that can be used to find this seat on the SVG
      displayGroup: "1", // Optional: The color or icon group that this seat should belong to
      selectionGroups: {
        row: "1",  // Optional: The groups that should be selected when this seat is selected
      },
    },
  ];

  return (
    <form>
      <SeatmapInput
        seats={seats}
        svg={svgUrl}
        value={selectedSeats}
        onChange={setSelectedSeats}
      />
    </form>
  );
};

SeatmapAccordion

import { useState } from "react";
import { SeatmapAccordion } from "react-svg-seatmap";

export default () => {
  const svgUrl = "https://www.test.com/svg";

  const seats = [
    {
      id: 1,
      cssSelector: "#seat-1-1-1", // The query selector that can be used to find this seat on the SVG
      displayGroup: "1", // Optional: The color or icon group that this seat should belong to
      selectionGroups: {
        row: "1", // Optional: The groups that should be selected when this seat is selected
      },
    },
  ];

  const handleSeatSelect = (selectedSeatId: number) => {
    alert(`You have clicked seat ${selectedSeatId}!`);
  };

  return (
    <SeatmapAccordion seats={seats} svg={svgUrl} onClick={handleSeatSelect} />
  );
};

Props

Seats | Name | Type | Description | | --------- | ------------------- | ------------------------------- | | id | number | The unique ID of the seat | | cssSelector | string | The unique query string that be used to find this seat on the SVG | | displayGroup | string | (Optional) The display group that this seat belongs to. Used to match against values passed in the displyGroupMapping prop | | selectionGroups | Record<string, string> | (Optional) If groupSelection is set to true in the seatmap component, this prop is used to determine the groups that can be used to select this seat (and that should be selected if this seat is selected). For instance, if this value contains { row: "A" }, clicking on any other seat in the "row A" group while selecting "row" groups will select this seat|

SeatmapInput | Name | Type | Description | | --------- | ------------------- | ------------------------------- | | svg | string | URL for an svg to render as the seatmap | | seats | Seat[] | The seats available to be selected on the seatmap. You can think of this as the "options" for the seatmap | | value | number[] | The IDs of all currently selected seats. Since this is a controlled component, this prop controls which seats are considered to be selected, and so should be stored in state. | | onChange | (selectedSeats: number[]) => void | Function that is run when the user changes the selected seats (either selection or deselection). Since this is a controlled component, the function argument is the new "value" for the seatmap. | | displayGroupMapping | Record<string, string | ReactNode> For example: { "A": "#ef857d", "B": "#de5472", "C": "#5a8ef7", "D": "#9b98e5"} | A mapping object that translates between a display group and a color or icon. If a seat is given a display group value, this object is used to determine how that seat should be displayed | | leftControls | ReactNode[] | An array of React components that will be rendered on the top left-hand side of the seatmap. This can be useful for setting up extra controls within the seatmap itself. | | rightControls | ReactNode[] | An array of React components that will be rendered on the top right-hand side of the seatmap. This can be useful for setting up extra controls within the seatmap itself. |

SeatmapAccordion | Name | Type | Description | | --------- | ------------------- | ------------------------------- | | svg | string | URL for an svg to render as the seatmap | | seats | Seat[] | The seats available to be selected on the seatmap. You can think of this as the "options" for the seatmap | | selectedSeatIds | number[] | The IDs of all currently selected seats. This prop sets the seats that should be selected, and so should be stored in state. | | onClick | (seatId: number, selected: boolean) => void | Function that is run when an available seat is clicked. The function argument is the ID of the clicked seat, and whether it was selected or deselected. | | displayGroupMapping | Record<string, string | ReactNode> For example: { "A": "#ef857d", "B": "#de5472", "C": "#5a8ef7", "D": "#9b98e5"} | A mapping object that translates between a display group and a color or icon. If a seat is given a display group value, this object is used to determine how that seat should be displayed | | leftControls | ReactNode[] | An array of React components that will be rendered on the top left-hand side of the seatmap. This can be useful for setting up extra controls within the seatmap itself. | | rightControls | ReactNode[] | An array of React components that will be rendered on the top right-hand side of the seatmap. This can be useful for setting up extra controls within the seatmap itself. |

License

MIT Licence