React 抽奖转盘组件,基于 HTML canvas,支持即时转动,

特点:

即时启动,不必等待抽奖结果的接口返回再启动转盘,先转起来再说~

超时控制

支持主动中断

支持渲染多行文本,多张图片

支持自动旋转

样式完全自定义

缓慢结束效果


安装

npm install turntable-react
or use yarn
yarn add turntable-react


import Turntable from 'turntable-react';

<Turntable
    size={300}
    prizes={prizes}
    onStart={fetchPrizeResult}
    onComplete={complete}
    onTimeout={timeout}
    >
    {/* 转盘指针 点击按钮 */}
    <div className="turntable-pointer">
        <img className="pointer-img" src={require('./pointer.png')} alt="" />
    </div>
</Turntable>

运行

cd turntable-react

yarn && yarn start

open broswer: http://localhost:8080/