{"id":18049987,"url":"https://github.com/alisaitteke/seatmap-canvas-react","last_synced_at":"2025-04-10T12:14:29.786Z","repository":{"id":213997271,"uuid":"520435144","full_name":"alisaitteke/seatmap-canvas-react","owner":"alisaitteke","description":"This is the ReactJS implementation of the original seatmap-canvas library, an open-source tool designed for interactive seat selection in various environments like stadiums, theaters, and event venues. Leveraging the capabilities of React and d3.js, this library provides a flexible and efficient solution for managing seat arrangements.","archived":false,"fork":false,"pushed_at":"2024-06-27T16:26:22.000Z","size":251,"stargazers_count":13,"open_issues_count":5,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T11:07:36.721Z","etag":null,"topics":["booking","canvas","d3","react","reactjs","seatselection"],"latest_commit_sha":null,"homepage":"https://seatmap.alisait.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alisaitteke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"alisaitteke","patreon":"alisait"}},"created_at":"2022-08-02T09:35:23.000Z","updated_at":"2025-01-11T01:00:39.000Z","dependencies_parsed_at":"2023-12-25T02:20:36.687Z","dependency_job_id":"ae257e66-d71f-4f49-865f-44c6b0499ff6","html_url":"https://github.com/alisaitteke/seatmap-canvas-react","commit_stats":null,"previous_names":["alisaitteke/seatmap-canvas-react"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alisaitteke","download_url":"https://codeload.github.com/alisaitteke/seatmap-canvas-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125623,"owners_count":21051770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["booking","canvas","d3","react","reactjs","seatselection"],"created_at":"2024-10-30T21:10:02.608Z","updated_at":"2025-04-10T12:14:29.762Z","avatar_url":"https://github.com/alisaitteke.png","language":"TypeScript","readme":"[![LIVE DEMO](https://raw.githubusercontent.com/alisaitteke/seatmap-canvas-react/master/assets/banner_ui.png?raw=true)](https://alisaitteke.github.io/seatmap-canvas)\n\n# Seatmap Canvas - React\nThis is the ReactJS implementation of the original [seatmap-canvas](https://alisaitteke.github.io/seatmap-canvas/) library, an open-source tool designed for interactive seat selection in various environments like stadiums, theaters, and event venues. Leveraging the capabilities of React and d3.js, this library provides a flexible and efficient solution for managing seat arrangements.\n\n## Features\n* React Integration: Designed specifically for React projects, offering a streamlined development experience.\n* Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.\n* Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.\n* Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.\n* Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.\n* Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.\n\n\n## Planned\n- Vue Integration: Designed specifically for Vue or Nuxt projects, offering a streamlined development experience.\n- Angular Integration: Designed specifically for Angular projects, offering a streamlined development experience.\n\n[LIVE DEMO](https://alisaitteke.github.io/seatmap-canvas/)\n\n\n## Installation\n\u003cpre\u003e\nnpm i \u003ca href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\"\u003e@alisaitteke/seatmap-canvas-react\u003c/a\u003e --save\nOR\nyarn add \u003ca href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\"\u003e@alisaitteke/seatmap-canvas-react\u003c/a\u003e --save\n\u003c/pre\u003e\n\n\n### Usage\n```js\nconst seatmapRef = React.createRef();\n\n\u003cSeatmap \n    className=\"w-full flex-1 h-full\" \n    ref={seatmapRef} \n    seatClick={seatClick} \n    blocks={blocks} \n    config={config}\u003e\n\u003c/Seatmap\u003e\n```\n\n### Config\n```js\nconst config = {\n    legend: true,\n    style: {\n        seat: {\n            hover: '#8fe100',\n            color: '#f0f7fa',\n            selected: '#8fe100',\n            check_icon_color: '#fff',\n            not_salable: '#0088d3',\n            focus: '#8fe100',\n        },\n        legend: {\n            font_color: '#3b3b3b',\n            show: false\n        },\n        block: {\n            title_color: '#fff'\n        }\n    }\n}\n```\n\n\n### API\n\n#### Zoom To Block\n```js\nseatmapRef.current.zoomManager.zoomToBlock(blockId)\n```\n\n\n#### Get Selected Seats\n```js\nconst selectedSeats = seatmapRef.current.getSelectedSeats()\n\n```\n\n\n#### Seat Click Handler\n```js\nconst seatClick = (seat) =\u003e {\n    if (!seat.isSelected() \u0026\u0026 seat.item.salable === true) {\n        seat.select()\n    } else {\n        seat.unSelect()\n    }\n}\n```\n\n#### Component Example\n```js\nimport React from 'react';\nimport SeatmapCanvas from '@alisaitteke/seatmap-canvas';\n\nconst MySeatmap = () =\u003e {\n    const config = {\n        legend: true,\n        style: {\n            seat: {\n                hover: '#8fe100',\n                color: '#f0f7fa',\n                selected: '#8fe100',\n                check_icon_color: '#fff',\n                not_salable: '#0088d3',\n                focus: '#8fe100',\n            },\n            legend: {\n                font_color: '#3b3b3b',\n                show: false\n            },\n            block: {\n                title_color: '#fff'\n            }\n        }\n    }\n\n    let blocks = [\n        {\n          \"id\": 1,\n          \"title\": \"Test Block 1\",\n          \"color\": \"#2c2828\",\n          \"labels\": [\n            {\n              \"title\": \"A\",\n              \"x\": -30,\n              \"y\": 0\n            },\n            {\n              \"title\": \"B\",\n              \"x\": 120,\n              \"y\": 30\n            }\n          ],\n          \"seats\": [\n            {\n              \"id\": 1,\n              \"x\": 0,\n              \"y\": 0,\n              \"salable\": true,\n              \"note\": \"note test\",\n              \"title\": \"49\"\n            },\n            {\n              \"id\": 2,\n              \"x\": 30,\n              \"y\": 0,\n              \"salable\": true,\n              \"note\": \"note test\",\n              \"title\": \"47\"\n            }\n          ]\n        }\n    ]\n\n    const seatClick = (seat) =\u003e {\n        if (!seat.isSelected() \u0026\u0026 seat.item.salable === true) {\n            seat.select()   // Set select seat\n        } else {\n            seat.unSelect() // Unselect seat\n        }\n    }\n\n    return (\n        \u003cSeatmap\n            className=\"w-full flex-1 h-full\"\n            ref={seatmapRef}\n            seatClick={seatClick}\n            blocks={blocks}\n            config={config}\u003e\n        \u003c/Seatmap\u003e\n    );\n};\n\nexport default MySeatmap;\n\n```\n\n## Contributors\nAli Sait TEKE \u003calisaitt@gmail.com\u003e\n","funding_links":["https://github.com/sponsors/alisaitteke","https://patreon.com/alisait"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Fseatmap-canvas-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falisaitteke%2Fseatmap-canvas-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Fseatmap-canvas-react/lists"}