{"_id":"@ahmiao666/lucky-wheel-react","_rev":"5-717face47e4995bce9f6218ef23e240c","name":"@ahmiao666/lucky-wheel-react","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@ahmiao666/lucky-wheel-react","version":"1.0.0","keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","_id":"@ahmiao666/lucky-wheel-react@1.0.0","maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"dist":{"shasum":"1bc60c18f752a5c01a6803020fc308c31a59783a","tarball":"https://registry.npmjs.org/@ahmiao666/lucky-wheel-react/-/lucky-wheel-react-1.0.0.tgz","fileCount":7,"integrity":"sha512-/AuKQ67suyUxMfcAomBwrzayRXv0Wjj5pLnoXU7DuzMBqriSYyOboJfUAYBm+zcJeN0ylhorCPVkhxjAAEDupQ==","signatures":[{"sig":"MEUCIQC4E7GQHP0QCBhftNWwaO2GedtKwnTBKVRmgrEC5v0/xwIgeVlD2xvG4O+RopBFTRdSVY3GzY+CxHYWJ0D1tOcFaEk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96386},"main":"index.js","type":"module","types":"react.d.ts","module":"index.esm.js","engines":{"npm":">=10.9.2","node":">=22.0.0"},"gitHead":"c19cd4d2d4ba9aa189465ee8b8749c941eabbd23","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"ahmiao666","email":"wangyimiao666@gmail.com"},"repository":{"url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git","type":"git"},"_npmVersion":"10.9.2","description":"React幸运大转盘组件","directories":{},"sideEffects":false,"_nodeVersion":"23.11.0","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.x","react-dom":">=19.x"},"_npmOperationalInternal":{"tmp":"tmp/lucky-wheel-react_1.0.0_1753447674423_0.8717679638435392","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ahmiao666/lucky-wheel-react","version":"1.0.1","keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","_id":"@ahmiao666/lucky-wheel-react@1.0.1","maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"dist":{"shasum":"034e1ebc37c031d06f3c102fe1ad38766f20834a","tarball":"https://registry.npmjs.org/@ahmiao666/lucky-wheel-react/-/lucky-wheel-react-1.0.1.tgz","fileCount":7,"integrity":"sha512-ph1iBMjAXeDTKK898LugKa2Fpj8N5stl4pF3Ta8VIM6wPMR7WZPvneJuqmsyCQaIauXXo9OF7ntcrfJYLvWE8Q==","signatures":[{"sig":"MEUCIBRV7CYOkQJPCDzjrBAfedPMn8wdxl3mcnm3RtE3na9yAiEAxEc5IG0QQQWgM7Pq8jfujrvyu5ahaDWK7wjH/OLgFME=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96738},"main":"index.js","type":"module","types":"react.d.ts","module":"index.esm.js","engines":{"npm":">=10.9.2","node":">=22.0.0"},"gitHead":"0476b38156fbc7f2e0bcc33cd4c441193121b937","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"ahmiao666","email":"wangyimiao666@gmail.com"},"repository":{"url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git","type":"git"},"_npmVersion":"10.9.2","description":"React幸运大转盘组件","directories":{},"sideEffects":false,"_nodeVersion":"23.11.0","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.x","react-dom":">=19.x"},"_npmOperationalInternal":{"tmp":"tmp/lucky-wheel-react_1.0.1_1753455930905_0.4348724565629951","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ahmiao666/lucky-wheel-react","version":"1.0.2","keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","_id":"@ahmiao666/lucky-wheel-react@1.0.2","maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"dist":{"shasum":"30c39b55a415f44e97d7dd5776b070e035b520c8","tarball":"https://registry.npmjs.org/@ahmiao666/lucky-wheel-react/-/lucky-wheel-react-1.0.2.tgz","fileCount":7,"integrity":"sha512-BZcAJRsyyuj2/kEyxtFlB4IEE0SHQxQgaS8eBvWPOkxeMes3+JoOOCD4s4Zywsj7BXBh2Yk34RailOqFmLa80w==","signatures":[{"sig":"MEUCIQC7uWe4ZCh3sRgKllgZjdC7cSxeH3Tgzmf7bvSzWHwdxgIgL8IhZJLUI0IivEcXBAhkmCEQLtkhEY0PSTrnu9wb51M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":101575},"main":"index.js","type":"module","types":"react.d.ts","module":"index.esm.js","engines":{"npm":">=10.9.2","node":">=22.0.0"},"gitHead":"e6f73eca94c6a8cde0814db2d976f8dc23132e06","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"ahmiao666","email":"wangyimiao666@gmail.com"},"repository":{"url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git","type":"git"},"_npmVersion":"10.9.2","description":"React幸运大转盘组件","directories":{},"sideEffects":false,"_nodeVersion":"23.11.0","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.x","react-dom":">=19.x"},"_npmOperationalInternal":{"tmp":"tmp/lucky-wheel-react_1.0.2_1753456756438_0.5964902095099474","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ahmiao666/lucky-wheel-react","version":"1.0.3","keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","_id":"@ahmiao666/lucky-wheel-react@1.0.3","maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"dist":{"shasum":"5ce6fdabe06d53276fae60f9577c732320423a90","tarball":"https://registry.npmjs.org/@ahmiao666/lucky-wheel-react/-/lucky-wheel-react-1.0.3.tgz","fileCount":7,"integrity":"sha512-J9iizE/tA4uVu3yLd8/kaT1BuGqlSJ3h55YXQRU77fKSpTH9R7XVZGGdUJO/M3kycCYyRAP1G7BRgwObB7eUbQ==","signatures":[{"sig":"MEQCIAojZBgzNjDPVo6SXfVsKE9SYnsg8tsOUs4wjzpRZQn1AiBmKKzyXqShH6PCTQv+morjDpSubTcV+tCB0osdrCtSWA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":101583},"main":"index.js","type":"module","types":"react.d.ts","module":"index.esm.js","engines":{"npm":">=10.9.2","node":">=22.0.0"},"gitHead":"29f5af4bace14da2d27829293ee2d2db0dd00b37","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"ahmiao666","email":"wangyimiao666@gmail.com"},"repository":{"url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git","type":"git"},"_npmVersion":"10.9.2","description":"React幸运大转盘组件","directories":{},"sideEffects":false,"_nodeVersion":"23.11.1","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.x","react-dom":">=19.x"},"_npmOperationalInternal":{"tmp":"tmp/lucky-wheel-react_1.0.3_1753999625315_0.7275766749075512","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ahmiao666/lucky-wheel-react","version":"1.0.4","type":"module","description":"React幸运大转盘组件","main":"index.js","module":"index.esm.js","types":"react.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git"},"bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","engines":{"node":">=22.0.0","npm":">=10.9.2"},"peerDependencies":{"react":">=19.x","react-dom":">=19.x"},"browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"sideEffects":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@ahmiao666/lucky-wheel-react@1.0.4","gitHead":"3f095287ad283564dcea627305b0966ffefdd49e","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-HLrWLPfD/GjEQC6xox4sLZ7756fHWGioBJ956enLJZW+6+HGic4IPDUa6i2B99/9OyEGpgHBgWSMEli4okKYCA==","shasum":"3c65fb6206a7a99a3cdd72812bac6b44a83a83b9","tarball":"https://registry.npmjs.org/@ahmiao666/lucky-wheel-react/-/lucky-wheel-react-1.0.4.tgz","fileCount":7,"unpackedSize":101583,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICijd3teFuMZ7QxFYx1d1Psuu6yuj7J0igOJG7332wFuAiA1mL1ZEomKfUDJAq4I6OzNVy5y82VX42NeD3dm12b+iQ=="}]},"_npmUser":{"name":"ahmiao666","email":"wangyimiao666@gmail.com"},"directories":{},"maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lucky-wheel-react_1.0.4_1754000542467_0.20172085124481076"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-25T12:47:53.807Z","modified":"2025-07-31T22:22:22.842Z","1.0.0":"2025-07-25T12:47:54.614Z","1.0.1":"2025-07-25T15:05:31.085Z","1.0.2":"2025-07-25T15:19:16.719Z","1.0.3":"2025-07-31T22:07:05.487Z","1.0.4":"2025-07-31T22:22:22.662Z"},"bugs":{"url":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo/issues"},"author":{"name":"ahmiao Lucky Wheel","email":"wangyimiao666@gmail.com"},"license":"MIT","homepage":"https://github.com/ahmiao666/ahmiao-lucky-wheel-demo","keywords":["lucky-wheel","canvas","react","typescript","animation","game","ui-component","performance","lucky-wheel","幸运大转盘","高性能","React组件"],"repository":{"type":"git","url":"git+https://github.com/ahmiao666/ahmiao-lucky-wheel-demo.git"},"description":"React幸运大转盘组件","maintainers":[{"name":"ahmiao666","email":"wangyimiao666@gmail.com"}],"readme":"# 🎉 ahmiao Lucky Wheel - React\n\n高性能React幸运转盘组件，支持完整的性能控制和诊断功能。\n\n## 🚀 安装\n\n```bash\nnpm install @ahmiao666/lucky-wheel-react\n```\n\n## 📖 快速开始\n\n```tsx\nimport React, { useRef, useState, useCallback } from \"react\";\nimport {\n ReactLuckyWheel,\n type WheelConfig,\n type SectorConfig,\n type ReactLuckyWheelRef,\n} from \"@ahmiao666/lucky-wheel-react\";\nimport \"./App.css\";\n\nfunction App() {\n const [spinning, setSpinning] = useState(false);\n const [result, setResult] = useState(\"\");\n const wheelRef = useRef(null);\n\n // 转盘配置（固定配置，不再动态更新）\n const wheelConfig: WheelConfig = {\n sectors: [\n {\n id: \"1\",\n text: \"超级大奖\",\n color: \"#FF6B6E\",\n textConfig: {\n fontSize: 16,\n color: \"#fff\",\n textAlign: \"center\",\n },\n },\n {\n id: \"2\",\n text: \"二等奖\",\n color: \"#4ECDC4\",\n },\n {\n id: \"3\",\n text: \"三等奖\",\n color: \"#45B7D1\",\n },\n {\n id: \"4\",\n text: \"四等奖\",\n color: \"#96CEB4\",\n },\n {\n id: \"5\",\n text: \"五等奖\",\n color: \"#FFEAA7\",\n },\n {\n id: \"6\",\n text: \"六等奖\",\n color: \"#DDA0DD\",\n },\n {\n id: \"7\",\n text: \"鼓励奖\",\n color: \"#6A0572\",\n },\n {\n id: \"8\",\n text: \"谢谢参与\",\n color: \"#FF9FF3\",\n },\n ],\n size: 400,\n targetDirection: 0,\n stopOffsetRange: 0.6,\n arrow: {\n size: 20,\n color: \"#333333\",\n distance: 220,\n },\n border: {\n width: 5,\n color: \"#ff0000\",\n style: \"solid\",\n },\n centerButton: {\n visible: true,\n animation: true,\n width: 60,\n height: 60,\n backgroundColor: \"#ffffff\",\n border: {\n width: 3,\n color: \"#333333\",\n style: \"solid\",\n },\n arrow: {\n size: 20,\n color: \"#333333\",\n offsetY: -35,\n },\n },\n };\n\n // 转盘事件处理\n const handleStart = useCallback(() => {\n setSpinning(true);\n setResult(\"\");\n }, []);\n\n const handleStop = useCallback((sector: SectorConfig) => {\n setSpinning(false);\n setResult(`🎉 恭喜您获得：${sector.text}！`);\n }, []);\n\n const handleCenterButtonClick = () => {\n // 先开始旋转\n handleManualStart();\n // 3秒后停止\n setTimeout(() => {\n handleManualStop()\n }, 3000);\n };\n // 手动开始转盘\n const handleManualStart = () => {\n wheelRef.current.start();\n };\n\n // 手动停止转盘\n const handleManualStop = () => {\n wheelRef.current.stop(\"2\");\n };\n\n // 自动演示（3秒后自动停止）\n const handleAutoDemo = () => {\n handleManualStart();\n setTimeout(() => {\n handleManualStop();\n }, 3000);\n };\n\n return (\n
\n

🎯 幸运大转盘 - 简化演示

\n\n {/* 结果显示 */}\n
\n {spinning ? \"🎲 转盘转动中...\" : result || \"点击中心按钮或控制按钮开始转盘\"}\n
\n\n {/* 控制按钮 */}\n
\n \n \n \n
\n\n {/* 转盘画布 */}\n
\n
\n \n
\n
\n\n {/* 奖品列表 */}\n
\n
\n

🏆 奖品列表

\n
\n {wheelConfig.sectors.map((sector: SectorConfig) => (\n
\n
\n
\n
{sector.text}
\n
\n
ID: {sector.id}
\n
\n ))}\n
\n
\n
\n\n {/* 使用提示 */}\n
\n

🎮 使用说明：

\n

• 点击中心按钮或\"开始转盘\"按钮开始转动

\n

• 点击\"停止转盘\"按钮手动停止

\n

• 点击\"自动演示\"体验3秒自动停止

\n

• 转盘会指定停在2号奖品上

\n
\n
\n );\n}\n\nexport default App;\n\n```\n\n## 🔗 相关链接\n\n- [完整文档](https://github.com/ahmiao666/ahmiao-lucky-wheel-demo)\n- [Vue版本](https://github.com/ahmiao666/ahmiao-lucky-wheel-demo)\n- [GitHub仓库](https://github.com/ahmiao666/ahmiao-lucky-wheel-demo)\n","readmeFilename":"README.md"}