{"_id":"@imagenix/imagenix-web","_rev":"31-008f27e5401b3690678aa772e297904d","name":"@imagenix/imagenix-web","dist-tags":{"latest":"0.1.66"},"versions":{"0.0.5":{"name":"@imagenix/imagenix-web","version":"0.0.5","_id":"@imagenix/imagenix-web@0.0.5","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"143d11ab6c5a9bbd9f7d069b9006d4de33ae6a88","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.0.5.tgz","fileCount":24,"integrity":"sha512-xboO3oki6T/lLqzEANZzLVlfq9t7tvSbW+fgTS0cElLi0o9Ue+MeXOeqy65o3XuS/ZvjrQDSMWaUivEPrrwxNA==","signatures":[{"sig":"MEQCIG2YQTG5STsdjXCyzCP7s0hZHlWH8cF8bAxmlnbKTVRJAiB3+5yx8rgvyUbw5y3sZYoq0AjFgCpmXaM/h+F7Rck2Pg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10371},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ec24935557d8a885d7d21325295fcdcae9cb2410","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.5"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.0.5_1759604955757_0.819015221889654","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@imagenix/imagenix-web","version":"0.0.6","_id":"@imagenix/imagenix-web@0.0.6","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"34aef93332f465a1436c98da6c8191962cbf2e9d","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.0.6.tgz","fileCount":24,"integrity":"sha512-VkASTV+M2MrTpMGm2vZF3CO7Oyx/bXroAKdJdSR0eZvzuvbFCdKcT+gmb1d9tsTlriqzgyYhpSPnVADcW2co8A==","signatures":[{"sig":"MEQCIFMJKUAPCpGYYyzqQxPEeS9uGoXIYCI2wY7/ki5cOUXcAiA+o1SrhY1jPDmFyWo80BEsiaOBQvTNC7SuRWGxM14wXw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10343},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ec24935557d8a885d7d21325295fcdcae9cb2410","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.5"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.0.6_1759605430476_0.780328012286513","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@imagenix/imagenix-web","version":"0.0.7","_id":"@imagenix/imagenix-web@0.0.7","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"9a87cb6e190f02ecbafb3231646669f796f7d282","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.0.7.tgz","fileCount":24,"integrity":"sha512-gyFAR9U2XZvR2lYk8vHg2cLgfYzNeOqd4P01vnZBsFAgbz1DTxLW+qzVOFqo7grEFzl2Mlw6cxJEIr3mIHHgRg==","signatures":[{"sig":"MEUCIQDtK9vIfJhai2kXyfCI0Y6OJTjc55EkfN4pUjiIMWbdQwIgSKAIP2RLdHGoJ/uVULeyPLcaTrOULrp6tGwHlL80L68=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10362},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"2b6713fde452cd0a9957edf4e2a2b3e6ee6aca81","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.6"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.0.7_1759613419754_0.5394066617883717","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@imagenix/imagenix-web","version":"0.0.8","_id":"@imagenix/imagenix-web@0.0.8","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"f85555f51f58d00ab83dd5d94a284f5e82094a47","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.0.8.tgz","fileCount":24,"integrity":"sha512-MJvREPhDcFgfENVANrgLPDCmY3jt/Fbviz5bNbPiS+wHHuEOb87h7+sLXsEggMlWKMejQia5vbq5Wqk824Oz+Q==","signatures":[{"sig":"MEQCIHBBGPeJqukf1+2NE4p0DgdjhgXfZZEh4MV46o1VN8vYAiAp/U63PPKtYhr1ivkPmuXpD8feCYNKllEZ7phAWZcIMQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10420},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a3dff47f9f631837a7d9b99924ac344b7b94784f","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.6"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.0.8_1759614596168_0.489822008798962","host":"s3://npm-registry-packages-npm-production"}},"0.0.9":{"name":"@imagenix/imagenix-web","version":"0.0.9","_id":"@imagenix/imagenix-web@0.0.9","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"30f8ffbad181f97cdc0c52cb8f1e9d9a8447aaa8","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.0.9.tgz","fileCount":24,"integrity":"sha512-WkJpZHr0AsTeLq+llFzMhxIKgm4kPqbuntwVOiFr3ugwSUE3wOitZJI+c2Ah2KVku/k6R6GJKzT2yV5XcFO40g==","signatures":[{"sig":"MEYCIQD199M3l99hPd/5qhOL+2IyRMUzFPavBK4bngMlF655QQIhAKMULSkDl1iT/ZDtRyJU+D6nXJn2IaEAowX1mAXuR/aW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10420},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a3dff47f9f631837a7d9b99924ac344b7b94784f","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.7"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.0.9_1759614633970_0.016297730262361476","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@imagenix/imagenix-web","version":"0.1.1","_id":"@imagenix/imagenix-web@0.1.1","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"7777f614f1312cc9a5d86a33787c53555eb11b27","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.1.tgz","fileCount":24,"integrity":"sha512-vXYZiDVCr06WekYaHRGxLCjgm3+NpzARdZDo2KwIsHvE0yJs14qREZHEYz1zyR4invKo4euve+G+0Qn6DC6mgw==","signatures":[{"sig":"MEQCIGchTeVQSTVgzMs/QRB6xV0JZhirkhwUXgQWFX4GJwL/AiBgsTYjR9k1koAL0hMrBFI4C/0I+07XAyDVy8K/QcMXdw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10420},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a3dff47f9f631837a7d9b99924ac344b7b94784f","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.7"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.1_1759614683355_0.9011491569774277","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@imagenix/imagenix-web","version":"0.1.2","_id":"@imagenix/imagenix-web@0.1.2","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"3bbf552580b6557ac2b6eb007fbb7c8ffad39a7d","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.2.tgz","fileCount":24,"integrity":"sha512-/3mPgYl5QOw0XVtOTVbeSpOZyG9T6bjDDpadjhmnNEqQCsXgFlkPWLi3XcZ2af685wUJ/jp+T5cauW3PFkGgzA==","signatures":[{"sig":"MEUCIQCAQhUBv7Ea69TKc0sXcqKj3RdrU2V/k1w8CKnq2Tb0fwIgUNqE33A4UcC9cgIJ9EyIkdNmb7aFZ/YFpmbuMSM49/U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30841},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"6d6976c7a8d522e93183d894620d2c47080f2108","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.7"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.2_1759632650250_0.06818585251733289","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@imagenix/imagenix-web","version":"0.1.3","_id":"@imagenix/imagenix-web@0.1.3","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"e7e65c9e8361355d7fa62fea9b8431f1855df608","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.3.tgz","fileCount":24,"integrity":"sha512-DAOSzjKwQv0lhxZD3D4mpQ0DigoU1kn4lOCT/0YI28sfTMZjjJzCtsrzrwBgcw1c17qKl+k5b2K4N88Rs+CRnQ==","signatures":[{"sig":"MEUCIQCrVb6m+OE2n7WoJGzQde0mSJquqivdmHRQC5Ah4M/9YwIgLEjMfxsPzcl7y5BBr5DeSMTXEShX+VIo29T/xnGFmaI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30775},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"496f7934ad5823f43836b78fe32858b1745572c0","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.9.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"23.6.0","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.7"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.3_1760392646052_0.8550075341523247","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@imagenix/imagenix-web","version":"0.1.4","_id":"@imagenix/imagenix-web@0.1.4","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"423e0c3caee3e65fc69164134bab073a5af435f4","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.4.tgz","fileCount":24,"integrity":"sha512-A+mYHrlqlWlrk1gXIIg9blSMat3TN2P52+p2Le4KP2T0jxNmOu57Zf86hzbl+pKnwORgZSY8Icnmu9jW/NwBBg==","signatures":[{"sig":"MEYCIQDAaG9tMYn4UlcJOaBoIlY0+ow2Rg8mBLaPpVBwcSZ/0wIhAMcBU0rJK0m1cLZTKawvq1r3bm3CQj4+XF8J1LUndo7y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30500},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f936fb96db1c428242a0ab98aa39ea10668f46f1","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.7"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.4_1760636287773_0.5437906469295268","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@imagenix/imagenix-web","version":"0.1.5","_id":"@imagenix/imagenix-web@0.1.5","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"bc87ed74349a98ac20cdf3493016105a1df1b3d2","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.5.tgz","fileCount":24,"integrity":"sha512-j/vw01YVRr6d4hdVR6fitgvG5LP6uXX5mFVwgOspaNga7prxjhS/BJ14IEmW1Nyh6vO0KNQYGRy2zGIEctsZQg==","signatures":[{"sig":"MEYCIQC4lqxHTxk2xEUioeLIHiTJ06a/uAQ6FLXEeQ56NKanHQIhANYJJJeI+mXQiqo31Dk4Z3xdqTu8zSLk3FBnZhUceYWZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30500},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"3de3d46cb6872b05933deff4ca48a50d8e31f092","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.8"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.5_1760654721433_0.9013127314471896","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@imagenix/imagenix-web","version":"0.1.6","_id":"@imagenix/imagenix-web@0.1.6","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"ed52298d4c46fce5b0541c2fa32d09d9c74a2f23","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.6.tgz","fileCount":24,"integrity":"sha512-4tNKRSBxfRkM5XJ+mGV5znXaBaZOsFBlUXzI+Rhg2adi+S29SRjo2bzIpdSBaY/EZNQwdLw26ss9KkzNocebxw==","signatures":[{"sig":"MEUCIBd9b0r4yR4riObYHTDzxnNc4bKgHmXGp6o4RLKX5o8LAiEArd8Y3h+V11kFYRxtb0zs+9cNV0U3WwTpUfojeQ0G6ps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30500},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"3de3d46cb6872b05933deff4ca48a50d8e31f092","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.9"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.6_1760654882520_0.03707297298894763","host":"s3://npm-registry-packages-npm-production"}},"0.1.61":{"name":"@imagenix/imagenix-web","version":"0.1.61","_id":"@imagenix/imagenix-web@0.1.61","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"61305afb968bbf357da500828e96001693586fdf","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.61.tgz","fileCount":24,"integrity":"sha512-7DkzllpJV93ZEn+2aZSxxl/0gm9qhvm9KXnCkTS+CBlMjkeSUyRh477SNt4lR7NNC0qvHs6yxI6udrZAkiMNVg==","signatures":[{"sig":"MEUCIQDzzWiVMo7/0x3wlnifkw3PP8qcHspBKfTCjySrE/0hhAIgDkXBgGNClJT0uaoE5NBJ3vnN2YCzjTUiWpuZhpbvnq8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30499},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"3de3d46cb6872b05933deff4ca48a50d8e31f092","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.9"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.61_1760655217404_0.03590230527007754","host":"s3://npm-registry-packages-npm-production"}},"0.1.62":{"name":"@imagenix/imagenix-web","version":"0.1.62","_id":"@imagenix/imagenix-web@0.1.62","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"85105a30c74a95de342f3d408446edde5868ea48","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.62.tgz","fileCount":24,"integrity":"sha512-N8jQuU67zNaRB053Ncx74gi8lnvzLRoySG7x1yeSPypu1D+Fll5nlFRhjwRPUOOyzkZkIcIaxF+1wAVM8BSQmQ==","signatures":[{"sig":"MEUCIQDO2j/RGzD81v0fnbuYnruO1e74GgD4hy/dVLldHL7DygIgWd1xcOwW7O129pJmLyBDMfGOoshk/xn4vqS8rxQvjOY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30548},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d31e0db135a4ece050d4874c2029cc6a2a747cb3","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.9"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.62_1760657251231_0.8815102549101215","host":"s3://npm-registry-packages-npm-production"}},"0.1.63":{"name":"@imagenix/imagenix-web","version":"0.1.63","_id":"@imagenix/imagenix-web@0.1.63","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"3809b2fb8d7469d178a7e5b3797ed7bc32169c9c","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.63.tgz","fileCount":24,"integrity":"sha512-tBm1lFSdYgcsLb2EmyJ0pKfgurwO9mt5EDuYYJLPObDXihDxnDqeUQ59AvYtntNZn5N4f0hSw6+uno4ubD3FLw==","signatures":[{"sig":"MEUCIEzfg6lQe62fSL/mSuawA0hX1JS4hf2xid1Z/a3hBIOQAiEA0n0NcAICw6Apm4CPzwHhCFV1is26ycEl2Oru0uNHH/I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30549},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d31e0db135a4ece050d4874c2029cc6a2a747cb3","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.93"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.63_1760659014877_0.8079456566541263","host":"s3://npm-registry-packages-npm-production"}},"0.1.64":{"name":"@imagenix/imagenix-web","version":"0.1.64","_id":"@imagenix/imagenix-web@0.1.64","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"201116acc472b6dec3d4fb9aaa9d6650ebdfd1de","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.64.tgz","fileCount":24,"integrity":"sha512-8Y+KKgaerzrDNjQ4zR8LAvH0GvslBSMSZ3LWrvAaLXhjsNJcSCpIOZQeV9ZpkOD0m/2xKGSjRE3LddtWnbTW8g==","signatures":[{"sig":"MEUCIHTPuBohy1Cw57MNwjwRXY7ARBObWM+oAQme4tTVA1ufAiEAru6SXxWeFqU9DRCx62ir/REzhZqyU07KFfAaZu6n/qY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30668},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"9bb5ffb3c147affd0a24bb794bb779e6b170ecf9","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.94"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.64_1760659749076_0.0051579155975778335","host":"s3://npm-registry-packages-npm-production"}},"0.1.65":{"name":"@imagenix/imagenix-web","version":"0.1.65","_id":"@imagenix/imagenix-web@0.1.65","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"dist":{"shasum":"3545e8e19e1fb6ca9783267bebdc89d0e0a4f443","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.65.tgz","fileCount":24,"integrity":"sha512-HOvqQxWq4vZ4dXpzMY6ZH9eE1/MW5+ZhiD+ZCc2EofVMhZVfhNlEX5qAtr/JgY47m364rCVqDz23/wBh6sWKgA==","signatures":[{"sig":"MEQCIEBHQZXlbHx/SFe+4ZGmQCd6nsWHs7HSd7AejhX1jPidAiAWRoHjIroz4aYv/WJSdY1SJMeQs/Jt2d/CgQ96y0rdgg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33349},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"2385401f899248dd36c68a074585e513b5db0765","private":false,"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc && node scripts/minify.js"},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"_npmVersion":"10.8.2","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your applications using the `InteractiveImageRenderer` component.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"d3":"^7.9.0","react":"^18","react-dom":"^18","@imagenix/imagenix-core":"^0.1.94"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8","terser":"^5.44.0","@types/d3":"^7.4.3","typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint-config-next":"14.2.13"},"_npmOperationalInternal":{"tmp":"tmp/imagenix-web_0.1.65_1760663795369_0.6074487962719182","host":"s3://npm-registry-packages-npm-production"}},"0.1.66":{"name":"@imagenix/imagenix-web","version":"0.1.66","private":false,"main":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"restricted"},"scripts":{"build":"tsc && node scripts/minify.js","test":"echo \"Error: no test specified\" && exit 1"},"dependencies":{"@imagenix/imagenix-core":"^0.1.94","d3":"^7.9.0","react":"^18","react-dom":"^18"},"devDependencies":{"@types/d3":"^7.4.3","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","eslint":"^8","eslint-config-next":"14.2.13","terser":"^5.44.0","typescript":"^5"},"_id":"@imagenix/imagenix-web@0.1.66","gitHead":"c3b379d8c5de9c07e586ea178b3fe641a6f616aa","description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your React applications using the `InteractiveImageRenderer` component.","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-GqOsmIZ0IgfAdJCkK/uIYs0RjTqQmVvSkQ4+mNIApYGci6HYT9cC+OcSvwTR2OIPxIlaI65pP/zyRSH/Xta4pg==","shasum":"9c63eda990ddfdf4e62e818d809272c725a31c5e","tarball":"https://registry.npmjs.org/@imagenix/imagenix-web/-/imagenix-web-0.1.66.tgz","fileCount":24,"unpackedSize":33849,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD4zABzPkHxAuzFKZoJg107OZ5NN2wpWWpgxej9qLdrAAIgW/2BS6C7Zu9CqQ7w/SOhpjINXQyHlBAayG8dCq97kJ8="}]},"_npmUser":{"name":"imagenix-dev","email":"imagenixdev@gmail.com"},"directories":{},"maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/imagenix-web_0.1.66_1761496829734_0.8956865256731008"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-04T19:09:15.354Z","modified":"2025-10-26T16:40:30.169Z","0.0.5":"2025-10-04T19:09:15.933Z","0.0.6":"2025-10-04T19:17:10.659Z","0.0.7":"2025-10-04T21:30:19.951Z","0.0.8":"2025-10-04T21:49:56.411Z","0.0.9":"2025-10-04T21:50:34.155Z","0.1.1":"2025-10-04T21:51:23.550Z","0.1.2":"2025-10-05T02:50:50.456Z","0.1.3":"2025-10-13T21:57:26.257Z","0.1.4":"2025-10-16T17:38:07.929Z","0.1.5":"2025-10-16T22:45:21.616Z","0.1.6":"2025-10-16T22:48:02.721Z","0.1.61":"2025-10-16T22:53:37.594Z","0.1.62":"2025-10-16T23:27:31.422Z","0.1.63":"2025-10-16T23:56:55.066Z","0.1.64":"2025-10-17T00:09:09.279Z","0.1.65":"2025-10-17T01:16:35.560Z","0.1.66":"2025-10-26T16:40:29.940Z"},"description":"This comprehensive guide explains how to create interactive images using Imagenix and integrate them into your React applications using the `InteractiveImageRenderer` component.","maintainers":[{"name":"imagenix-dev","email":"imagenixdev@gmail.com"}],"readme":"# Creating Imagenix.Dev Images for React Projects: Complete Guide\n\nThis comprehensive guide explains how to create interactive images using Imagenix and integrate them into your React applications using the `InteractiveImageRenderer` component.\n\n> **Note**: This is a React package. Imagenix.Dev is designed specifically for React projects.\n\n## Table of Contents\n\n1. [Overview](#overview)\n2. [Creating an Interactive Image](#creating-an-interactive-image)\n3. [Understanding the JSON Structure](#understanding-the-json-structure)\n4. [Using InteractiveImageRenderer](#using-interactiveimagerenderer)\n5. [Complete Code Examples](#complete-code-examples)\n6. [Best Practices](#best-practices)\n\n## Overview\n\nImagenix.Dev is a React package that allows you to transform static images into interactive experiences by adding clickable areas and hover effects in your React applications. The process involves:\n\n1. **Creating**: Upload an image to [https://imagenix.dev/editor](https://imagenix.dev/editor) (designed for React projects) and draw interactive areas\n2. **Exporting**: Download the JSON configuration file\n3. **Integrating**: Use the `InteractiveImageRenderer` component in your React application\n\n## Creating an Interactive Image\n\n### Step 1: Access the Editor\nVisit [https://imagenix.dev/editor](https://imagenix.dev/editor) (for React projects) and sign in with your Google account.\n\n### Step 2: Upload Your Image\n1. Click \"Upload Image\" and select your image file\n2. The image will be displayed in the editor canvas\n3. Ensure your image is high-quality and well-lit for best results\n\n### Step 3: Draw Interactive Areas\n1. **Select Drawing Mode**: Choose between \"Polygon\" or \"Ellipse\" drawing modes\n2. **Create Groups**: Name your interactive areas (e.g., \"hood\", \"windows\", \"wheels\")\n3. **Draw Shapes**: \n - **Polygons**: Click to create points that form complex shapes\n - **Ellipses**: Click and drag to create circular or oval areas\n4. **Set Colors**: Define default and active colors for each group\n\n### Step 4: Export Your Configuration\n1. Click the \"Export\" button\n2. Download the JSON file containing your interactive image configuration\n\n## Understanding the JSON Structure\n\nThe exported JSON contains all the data needed to recreate your interactive image. Here's the structure:\n\n```typescript\ninterface ImageDataType {\n size: {\n x: number; // Original image width\n y: number; // Original image height\n };\n shapes: {\n [groupName: string]: {\n nodes: Array<{\n points: Array<{\n x: number;\n y: number;\n curve: \"curveLinear\";\n }>;\n id: string;\n group: string;\n colourSchema?: {\n default: string;\n active: string;\n };\n }>;\n colourSchema: {\n default: string;\n active: string;\n };\n };\n };\n ellipses: {\n [groupName: string]: {\n nodes: Array<{\n cx: number;\n cy: number;\n rx: number;\n ry: number;\n fill: string;\n rotation: number;\n id: string;\n group: string;\n }>;\n colourSchema: {\n default: string;\n active: string;\n };\n };\n };\n}\n```\n\n### Example JSON Structure (Car Data)\n\n```json\n{\n \"size\": {\n \"x\": 1400,\n \"y\": 800\n },\n \"shapes\": {\n \"hood\": {\n \"nodes\": [\n {\n \"points\": [\n {\n \"x\": 476.53125,\n \"y\": 447.42578125,\n \"curve\": \"curveLinear\"\n }\n // ... more points\n ],\n \"id\": \"hood-\",\n \"group\": \"hood\"\n }\n ],\n \"colourSchema\": {\n \"default\": \"blue\",\n \"active\": \"blue\"\n }\n }\n },\n \"ellipses\": {\n \"wheels\": {\n \"nodes\": [\n {\n \"cx\": 921.03125,\n \"cy\": 461.17578125,\n \"rx\": 62,\n \"ry\": 125,\n \"fill\": \"rgba(100, 150, 255, 0.5)\",\n \"rotation\": -0.022428348587675506,\n \"id\": \"wheels-1\",\n \"group\": \"wheels\"\n }\n ],\n \"colourSchema\": {\n \"default\": \"blue\",\n \"active\": \"blue\"\n }\n }\n }\n}\n```\n\n## Using InteractiveImageRenderer\n\nThe `InteractiveImageRenderer` component is the core component for displaying interactive images in your React applications.\n\n### Installation\n\nInstall the React package:\n```bash\nnpm install @imagenix/imagenix-web\n```\n\n### Basic Usage\n\n```tsx\nimport React, { useState, useMemo } from 'react';\nimport { InteractiveImageRenderer } from '@imagenix/imagenix-web';\nimport { imageDataType } from '@imagenix/imagenix-web';\n\ninterface InteractiveImageProps {\n imageUrl: string;\n imageData: imageDataType;\n width: number; // image height will be set based on the original ratio\n}\n\nconst MyInteractiveImage: React.FC = ({\n imageUrl,\n imageData,\n width,\n descriptions\n}) => {\n const [activeGroup, setActiveGroup] = useState(null);\n\n // Create event handlers for each interactive area\n const eventHandlerMap = useMemo(() => {\n const shapes = {};\n const ellipses = {};\n\n // Get all group names from the image data\n const groups = [\n ...Object.keys(imageData?.shapes || {}),\n ...Object.keys(imageData?.ellipses || {})\n ];\n\n groups.forEach(group => {\n const handlers = {\n handleClick: (event: React.MouseEvent) => {\n console.log('Clicked on:', group);\n setActiveGroup(group);\n },\n handleMouseEnter: (event: React.MouseEvent) => {\n console.log('Hovered over:', group);\n },\n handleMouseLeave: (event: React.MouseEvent) => {\n console.log('Left:', group);\n }\n };\n\n // Assign handlers to the correct container (shapes or ellipses)\n if (imageData?.shapes?.[group]) {\n (shapes as Record)[group] = handlers;\n } else if (imageData?.ellipses?.[group]) {\n (ellipses as Record)[group] = handlers;\n }\n });\n\n return { shapes, ellipses };\n }, [imageData]);\n\n const ariaLabelMap = useMemo(() => {\n const ariaLabels: Record = {};\n Object.entries(descriptions).forEach(([key, description]) => {\n if (description) {\n ariaLabels[key] = description;\n }\n });\n return ariaLabels;\n }, [descriptions]);\n\n return (\n
\n \n \n {/* Optional: Display active group information */}\n {activeGroup && (\n
\n

Currently selected: {activeGroup}

\n
\n )}\n
\n );\n};\n\nexport default MyInteractiveImage;\n```\n\n### Component Props\n\n| Prop | Type | Description | Required |\n|------|------|-------------|----------|\n| `frameKey` | `string` | Unique identifier for the component instance | ✅ |\n| `imageUrl` | `string` | URL of the original image | ✅ |\n| `imageData` | `imageDataType` | JSON configuration from Imagenix editor | ✅ |\n| `eventHandlerMap` | `EventHandlerMap` | Object containing click/hover handlers | ✅ |\n| `activeGroup` | `string \\| null` | Currently active/selected group | ✅ |\n| `width` | `number` | The width of the display image (this is used to auto-calculate and set the height of the display image, based on the original aspect ration) | ✅ |\n| `ariaLabelMap` | `{ [key: string]: string }` | Object mapping group names to accessibility labels for screen readers | ❌ |\n\n### Accessibility with ariaLabelMap\n\nThe `ariaLabelMap` prop provides accessibility labels for interactive areas, making your interactive images accessible to users with screen readers and other assistive technologies.\n\n**Usage:**\n```tsx\nconst ariaLabelMap = {\n 'hood': 'Car hood - click to learn about the engine compartment',\n 'windows': 'Car windows - click to learn about glass features',\n 'wheels': 'Car wheels - click to learn about tire specifications'\n};\n\n\n```\n\n**Best Practices:**\n- Use descriptive, actionable language\n- Keep labels concise but informative\n- Include the action users can take (e.g., \"click to learn more\")\n- Map each group name from your image data to a meaningful description\n- Test with screen readers to ensure clarity\n\n## Complete Code Examples\n\nAll examples below are for React projects using the Imagenix.Dev React package.\n\n### Example 1: Car Interactive Image\n\n```tsx\nimport React, { useState, useMemo } from 'react';\nimport { InteractiveImageRenderer } from '@imagenix/imagenix-web';\nimport { imageDataType } from '@imagenix/imagenix-web';\nimport { carData } from './data/car';\n\nconst CarInteractiveDemo: React.FC = () => {\n const [activeGroup, setActiveGroup] = useState(null);\n const [previewGroup, setPreviewGroup] = useState('hood');\n\n // Parse the car data\n const imageData = JSON.parse(carData);\n\n // This MUST be the same image that you used in the editor!\n const imageUrl = \"https://example.com/car-image.jpg\";\n const groups = ['hood', 'windows', 'wheels'];\n \n const width = 700\n\n const eventHandlerMap = useMemo(() => {\n const shapes = {};\n const ellipses = {};\n\n groups.forEach(group => {\n const handlers = {\n handleClick: (event: React.MouseEvent) => {\n console.log('Car part clicked:', group);\n setActiveGroup(group);\n },\n handleMouseEnter: (event: React.MouseEvent) => {\n console.log('Hovering over:', group);\n setPreviewGroup(group);\n },\n handleMouseLeave: (event: React.MouseEvent) => {\n console.log('Left:', group);\n setPreviewGroup(null);\n }\n };\n\n if (imageData?.shapes?.[group]) {\n (shapes as Record)[group] = handlers;\n } else if (imageData?.ellipses?.[group]) {\n (ellipses as Record)[group] = handlers;\n }\n });\n\n return { shapes, ellipses };\n }, [imageData, groups]);\n\n const getGroupDescription = (group: string) => {\n const descriptions = {\n hood: \"The car hood is made from lightweight aluminum alloy with aerodynamic design.\",\n windows: \"Premium tempered glass windows with UV protection and anti-glare coating.\",\n wheels: \"High-performance alloy wheels with advanced traction control system.\"\n };\n return descriptions[group as keyof typeof descriptions] || 'No description available.';\n };\n\n // Create accessibility labels for screen readers\n const ariaLabelMap = useMemo(() => {\n const descriptions = {\n hood: \"Car hood - click to learn about the engine compartment and aluminum construction\",\n windows: \"Car windows - click to learn about premium glass features and UV protection\",\n wheels: \"Car wheels - click to learn about high-performance alloy wheels and traction control\"\n };\n return descriptions;\n }, []);\n\n return (\n
\n

Interactive Car Demo

\n \n
\n \n
\n\n
\n

Car Information

\n

\n {activeGroup \n ? getGroupDescription(activeGroup)\n : \"Hover over different parts of the car to learn more about each component.\"\n }\n

\n \n {activeGroup && (\n \n )}\n
\n
\n );\n};\n\nexport default CarInteractiveDemo;\n```\n\n### Example 2: Refrigerator Interactive Image\n\n```tsx\nimport React, { useState, useMemo } from 'react';\nimport { InteractiveImageRenderer } from '@imagenix/imagenix-web';\nimport { imageDataType } from '@imagenix/imagenix-web';\nimport { refrigeratorData } from './data/refrigerator';\n\nconst RefrigeratorInteractiveDemo: React.FC = () => {\n const [activeGroup, setActiveGroup] = useState(null);\n\n const imageData = JSON.parse(refrigeratorData);\n\n // This MUST be the same image that you used in the editor!\n const imageUrl = \"https://example.com/refrigerator-image.jpg\";\n const groups = ['door', 'top-screen', 'bottom-screen', 'shelves'];\n \n const width = 700\n\n const eventHandlerMap = useMemo(() => {\n const shapes = {};\n const ellipses = {};\n\n groups.forEach(group => {\n const handlers = {\n handleClick: (event: React.MouseEvent) => {\n console.log('Refrigerator component clicked:', group);\n setActiveGroup(activeGroup === group ? null : group);\n },\n handleMouseEnter: (event: React.MouseEvent) => {\n console.log('Hovering over refrigerator component:', group);\n },\n handleMouseLeave: (event: React.MouseEvent) => {\n console.log('Left refrigerator component:', group);\n }\n };\n\n if (imageData?.shapes?.[group]) {\n (shapes as Record)[group] = handlers;\n }\n });\n\n return { shapes, ellipses };\n }, [imageData, groups, activeGroup]);\n\n const getComponentInfo = (group: string) => {\n const info = {\n door: {\n title: \"Smart Door\",\n description: \"Energy-efficient door with LED lighting and temperature control.\",\n features: [\"LED Lighting\", \"Temperature Control\", \"Energy Efficient\"]\n },\n 'top-screen': {\n title: \"Control Panel\",\n description: \"Touchscreen interface for controlling refrigerator settings.\",\n features: [\"Touchscreen\", \"Temperature Display\", \"Weather Info\"]\n },\n 'bottom-screen': {\n title: \"Food Management\",\n description: \"Smart display for food inventory and recommendations.\",\n features: [\"Food Tracking\", \"Expiry Alerts\", \"Recipe Suggestions\"]\n },\n shelves: {\n title: \"Adjustable Shelves\",\n description: \"Flexible storage with optimal organization features.\",\n features: [\"Adjustable Height\", \"Easy Cleaning\", \"Optimal Organization\"]\n }\n };\n return info[group as keyof typeof info] || null;\n };\n\n const currentInfo = activeGroup ? getComponentInfo(activeGroup) : null;\n\n // Create accessibility labels for screen readers\n const ariaLabelMap = useMemo(() => {\n return {\n 'door': 'Smart refrigerator door - click to learn about LED lighting and temperature control',\n 'top-screen': 'Control panel - click to learn about touchscreen interface and settings',\n 'bottom-screen': 'Food management display - click to learn about inventory tracking and recommendations',\n 'shelves': 'Adjustable shelves - click to learn about flexible storage options'\n };\n }, []);\n\n return (\n
\n

Smart Refrigerator Demo

\n \n
\n
\n \n
\n\n
\n {currentInfo ? (\n
\n

{currentInfo.title}

\n

{currentInfo.description}

\n \n

Features:

\n
    \n {currentInfo.features.map((feature, index) => (\n
  • {feature}
    • \n ))}\n
\n
\n ) : (\n
\n

Welcome to Smart Refrigerator

\n

Click on any component to learn more about its features and capabilities.

\n
\n )}\n
\n
\n
\n );\n};\n\nexport default RefrigeratorInteractiveDemo;\n```\n\n### Example 3: Floor Plan Interactive Image\n\n```tsx\nimport React, { useState, useMemo } from 'react';\nimport { InteractiveImageRenderer } from '@imagenix/imagenix-web';\nimport { imageDataType } from '@imagenix/imagenix-web';\nimport { floorPlan } from './data/floorPlan';\n\nconst FloorPlanInteractiveDemo: React.FC = () => {\n const [activeGroup, setActiveGroup] = useState(null);\n const [hoveredGroup, setHoveredGroup] = useState(null);\n\n const imageData = floorPlan;\n\n // This MUST be the same image that you used in the editor!\n const imageUrl = \"https://example.com/floor-plan.jpg\";\n const groups = ['bathrooms', 'bedrooms'];\n \n const width = 875\n\n const eventHandlerMap = useMemo(() => {\n const shapes = {};\n const ellipses = {};\n\n groups.forEach(group => {\n const handlers = {\n handleClick: (event: React.MouseEvent) => {\n console.log('Room clicked:', group);\n setActiveGroup(activeGroup === group ? null : group);\n },\n handleMouseEnter: (event: React.MouseEvent) => {\n console.log('Hovering over room:', group);\n setHoveredGroup(group);\n },\n handleMouseLeave: (event: React.MouseEvent) => {\n console.log('Left room:', group);\n setHoveredGroup(null);\n }\n };\n\n if (imageData?.shapes?.[group]) {\n (shapes as Record)[group] = handlers;\n }\n });\n\n return { shapes, ellipses };\n }, [imageData, groups, activeGroup]);\n\n const getRoomInfo = (group: string) => {\n const roomInfo = {\n bathrooms: {\n count: 3,\n totalArea: \"45 sq ft\",\n features: [\"Modern fixtures\", \"Ventilation\", \"Storage\"]\n },\n bedrooms: {\n count: 4,\n totalArea: \"120 sq ft\",\n features: [\"Walk-in closets\", \"Natural lighting\", \"Private access\"]\n }\n };\n return roomInfo[group as keyof typeof roomInfo] || null;\n };\n\n const currentInfo = activeGroup ? getRoomInfo(activeGroup) : null;\n const hoveredInfo = hoveredGroup ? getRoomInfo(hoveredGroup) : null;\n\n // Create accessibility labels for screen readers\n const ariaLabelMap = useMemo(() => {\n return {\n 'bathrooms': 'Bathrooms - click to learn about bathroom features and specifications',\n 'bedrooms': 'Bedrooms - click to learn about bedroom features and specifications'\n };\n }, []);\n\n return (\n
\n

Interactive Floor Plan

\n \n
\n
\n \n
\n\n
\n
\n

Room Statistics

\n {currentInfo ? (\n
\n

{activeGroup?.charAt(0).toUpperCase() + activeGroup?.slice(1)}

\n

Count: {currentInfo.count}

\n

Total Area: {currentInfo.totalArea}

\n
\n
Features:
\n
    \n {currentInfo.features.map((feature, index) => (\n
  • {feature}
    • \n ))}\n
\n
\n
\n ) : hoveredInfo ? (\n
\n

Hovering: {hoveredGroup?.charAt(0).toUpperCase() + hoveredGroup?.slice(1)}

\n

Count: {hoveredInfo.count}

\n

Total Area: {hoveredInfo.totalArea}

\n
\n ) : (\n

Hover over or click on rooms to see details.

\n )}\n
\n
\n
\n
\n );\n};\n\nexport default FloorPlanInteractiveDemo;\n```\n\n## Best Practices for React Projects\n\n### 1. You MUST render the same image with InteractiveImageRenderer that you used in the editor. If you edit your original image, then just create a new\ninteractive image for that image.\n\n### 2. Optimize Event Handlers in React\nUse `useMemo` to prevent unnecessary re-renders in your React component:\n\n```tsx\nconst eventHandlerMap = useMemo(() => {\n // Create handlers\n}, [imageData, activeGroup]); // Only recreate when dependencies change\n```\n\n### 3. Handle Loading States\n```tsx\nconst [isLoading, setIsLoading] = useState(true);\n\nuseEffect(() => {\n const img = new Image();\n img.onload = () => setIsLoading(false);\n img.src = imageUrl;\n}, [imageUrl]);\n\nif (isLoading) {\n return
Loading interactive image...
;\n}\n```\n\n### 4. Provide User Feedback\n```tsx\nconst [hoveredGroup, setHoveredGroup] = useState(null);\n\n// In your event handlers\nhandleMouseEnter: () => {\n setHoveredGroup(group);\n // Optional: Show tooltip or highlight\n},\nhandleMouseLeave: () => {\n setHoveredGroup(null);\n // Optional: Hide tooltip\n}\n```\n\n### 5. Error Handling\n```tsx\nconst [error, setError] = useState(null);\n\nuseEffect(() => {\n try {\n const parsedData = JSON.parse(imageDataJson);\n // Validate the structure\n if (!parsedData.size || !parsedData.shapes || !parsedData.ellipses) {\n throw new Error('Invalid image data structure');\n }\n } catch (err) {\n setError('Failed to load image data');\n }\n}, [imageDataJson]);\n\nif (error) {\n return
Error: {error}
;\n}\n```\n\n### 6. Responsive Design\n```tsx\nconst [containerSize, setContainerSize] = useState({ width: 800, height: 600 });\n\nuseEffect(() => {\n const updateSize = () => {\n const container = containerRef.current;\n if (container) {\n const { width } = container.getBoundingClientRect();\n const height = width / originalRatio;\n setContainerSize({ width, height });\n }\n };\n\n updateSize();\n window.addEventListener('resize', updateSize);\n return () => window.removeEventListener('resize', updateSize);\n}, [originalRatio]);\n```\n\n## Conclusion\n\nThe Imagenix.Dev platform (for React projects) makes it easy to create interactive images that enhance user engagement in your React applications. By following this guide and using the provided code examples, you can:\n\n1. Create interactive images in the Imagenix.Dev editor (React-focused)\n2. Export the configuration JSON\n3. Integrate them into your React applications using the `InteractiveImageRenderer` component\n4. Handle user interactions with custom event handlers\n5. Maintain proper aspect ratios and responsive design\n\nFor more advanced features and customization options, refer to the [Imagenix documentation](https://imagenix.dev) or explore the component source code.\n","readmeFilename":"README.md"}