{"_id":"@alisaitteke/seatmap-canvas-react","_rev":"8-0ce485995ec61eb786ae495a202f70e5","name":"@alisaitteke/seatmap-canvas-react","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.1":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.1","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.1","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"f948e02e645c993c1e0e9e17963760b477fce272","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.1.tgz","fileCount":28,"integrity":"sha512-TKJ2ckBqvYETWwMpYs+PINymJrJC9hBehfd3Fvwh3qVvP+hZ+neqBXcfQs6hd3rj2HYCivGNXIArmpHuQcUNxQ==","signatures":[{"sig":"MEYCIQCJQmCZZG3y42Phbo4xO4GTYKSrvukwoCPk62G3GOxMdQIhAIncQ8T/AOL258Lg+NbBsfj6UroOgqUhQ50ItMuOp8ll","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754587},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.1_1703466550819_0.7014007909645357","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.2","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.2","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"2bc16054ac162486c4ed3924504a690f94f2258e","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.2.tgz","fileCount":28,"integrity":"sha512-tzUET/VG/YmJnWywAExvK2VUu3YOlyhU6ocdU4I3rA04P7vTqVHbduJAldvoUhkIqsKJqyej9Rri5mcEsmWdQQ==","signatures":[{"sig":"MEUCIDGbA5gxmFUfW2sv4mKAgxFb/F+YaT+t3aTYJsO5zjlUAiEAx/wEbKjmW4Ex8G7jgKTkUt3QDDW3OoZI7l1bCtx5JAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754659},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.2_1703466872152_0.500732151954481","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.3":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.3","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.3","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"3d802a04d4ca4eec5d6bfb552c9811cd8fa0e7af","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.3.tgz","fileCount":28,"integrity":"sha512-igHTZDh89M9rGXPARA+4obnaQLDR3hp7EhG1iyp7gerVYXnL6QwxHJ2uomlIm72SGfj+aKm5raLSGxUO0ijiqg==","signatures":[{"sig":"MEQCIGhwCKRrmssARoz4hhQVE0ajYkFpFoRKrHETRwu80c+QAiAafTddGrh0bhFUh0dFaIbxPq8DtBy4+frI11QxtKLdyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754774},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.3_1703467243711_0.18188346516671072","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.4":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.4","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.4","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"7ac03737c6a40f0f3b44ed062c33a8aaf9d46898","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.4.tgz","fileCount":28,"integrity":"sha512-tj8PU6tjCQ0cUFOLAELAnQkucRZki7QIcRXRHkRAlUemHXEdVj2PnXG7kLuWo+fsdoE216s/6N4OhjIR5htbUQ==","signatures":[{"sig":"MEYCIQDrqp4Wj9EC3uOtWuMGKc/E3jlVdh7StL9vE9brkoNuGQIhAKkQVXLXfCPt+HQg+En/hzdwRxPunqFHuiXMyJQlHXF6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754774},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.4_1703467485108_0.1646431756881801","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.5","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.5","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"7d2e059df8aaad6b8e19a72fac08d2a17d109f97","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.5.tgz","fileCount":28,"integrity":"sha512-rGQsScCA7c9yC0dM/fF7JRktTZse23otfkw5zZhUnoZSPU4qVfYxpqrva/Ngf6IcfKfbSk5hiEJidG0GAw4Jzg==","signatures":[{"sig":"MEYCIQCiMgZqrc7giGtrEsy45eR/x+Rdqgdf9A6Dio/cUP2C0gIhAPLUN0ClN7sOjMF0wh8o/1urjhJswp7v7NCCA2XOFATA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754792},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.5_1703469148182_0.21569614315305752","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.6","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.6","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"df2de493838b63bb098f242cf01f5b9b2b2c9a4f","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.6.tgz","fileCount":28,"integrity":"sha512-A4hfWon2NBD0I8Gwaed/BJnLuABSESsoH6OzWl7i0VH7WsvS41kXkYsbCHT4vrK/7qtFvFtgnn6ulw2OyhJfxA==","signatures":[{"sig":"MEUCIQDbLqperKDYX2oRGxlD9Y9ByhBZ/wanHJeiuQxVbzxMTQIgeSG7HAMc+iSh/M4MvLcWy8vObggkFY0arTDXNh+L7/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754769},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","directories":{},"dependencies":{"prop-types":"^15.8.1","@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.6_1703470121812_0.5876533015182768","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@alisaitteke/seatmap-canvas-react","version":"1.0.7","keywords":["seating","seatmap","seat-selection"],"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","_id":"@alisaitteke/seatmap-canvas-react@1.0.7","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"dist":{"shasum":"a2c2e8a7bd3502ae4f5e801cf2f353c6906e1ac3","tarball":"https://registry.npmjs.org/@alisaitteke/seatmap-canvas-react/-/seatmap-canvas-react-1.0.7.tgz","fileCount":28,"integrity":"sha512-Evwtxm/F1p0KR9PoIE1VGueF+I1U7NHuWdh0+jHNHBJrIgmSNO/bLeDNAPkp8wzhy+lsMsHLP8Lfg+zLFAci5w==","signatures":[{"sig":"MEQCIBPdjgH8pRStF8b0at9SEngi0vz2vN4XJPmsS6T6+q1ZAiB0pCly3xU/yuIZZ8AdSDeEqcimeIYckiYoDQBu77Plkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":754792},"main":"dist/cjs/index.js","tags":"seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation","types":"dist/index.d.ts","module":"dist/esm/index.js","engines":{"node":">=18.0.0"},"private":false,"scripts":{"build":"rollup -c --bundleConfigAsCjs","start":"rollup --config --watch --bundleConfigAsCjs"},"_npmUser":{"name":"axee","email":"alisaitt@gmail.com"},"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","directories":{},"dependencies":{"@alisaitteke/seatmap-canvas":"latest"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.9.1","react-dom":"^18.2.0","storybook":"^7.6.6","prop-types":"^15.8.1","typescript":"^5.3.3","@types/react":"^18.2.45","rollup-plugin-dts":"^6.1.0","styled-components":"^6.1.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.34","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/seatmap-canvas-react_1.0.7_1703719124435_0.8072050644685191","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2023-12-25T01:09:10.680Z","modified":"2026-03-06T09:45:40.789Z","1.0.1":"2023-12-25T01:09:11.025Z","1.0.2":"2023-12-25T01:14:32.423Z","1.0.3":"2023-12-25T01:20:43.953Z","1.0.4":"2023-12-25T01:24:45.369Z","1.0.5":"2023-12-25T01:52:28.467Z","1.0.6":"2023-12-25T02:08:42.245Z","1.0.7":"2023-12-27T23:18:44.653Z"},"author":{"name":"Ali Sait Teke","email":"alisaitteke@gmail.com"},"license":"ISC","keywords":["seating","seatmap","seat-selection"],"repository":{"url":"git+https://github.com/alisaitteke/seatmap-canvas-react.git","type":"git"},"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 ","maintainers":[{"name":"axee","email":"alisaitt@gmail.com"}],"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<pre>\nnpm i <a href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\">@alisaitteke/seatmap-canvas-react</a> --save\nOR\nyarn add <a href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\">@alisaitteke/seatmap-canvas-react</a> --save\n</pre>\n\n\n### Usage\n```js\nconst seatmapRef = React.createRef();\n\n<Seatmap \n    className=\"w-full flex-1 h-full\" \n    ref={seatmapRef} \n    seatClick={seatClick} \n    blocks={blocks} \n    config={config}>\n</Seatmap>\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) => {\n    if (!seat.isSelected() && 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 = () => {\n    const config = {\n        // Your CONFIG here\n    };\n\n    let blocks = [\n        // Your BLOCK_DATA here\n    ]\n\n    const seatClick = (seat) => {\n        if (!seat.isSelected() && seat.item.salable === true) {\n            seat.select()   // Set select seat\n        } else {\n            seat.unSelect() // Unselect seat\n        }\n    }\n\n    return (\n        <Seatmap\n            className=\"w-full flex-1 h-full\"\n            ref={seatmapRef}\n            seatClick={seatClick}\n            blocks={blocks}\n            config={config}>\n        </Seatmap>\n    );\n};\n\nexport default MySeatmap;\n\n```\n\n## Contributors\nAli Sait TEKE <alisaitt@gmail.com>","readmeFilename":"README.md"}