1587315093 / scratch-card

canvas实现的 react 刮刮卡组件,可用于刮奖与刮刮乐等业务; The react scratch card component implemented by canvas can be used for scratch-off and scratch-off games and other businesses

ScratchCard 刮刮卡（React 版）

使用

欢迎提交 issue 与 pr~

$ npm install scratch-card-react
# or
$ yarn add scratch-card-react
# or
$ pnpm install scratch-card-react

属性

属性	说明	类型	默认值
classNames	语义结构化的 className	{ root?:string, mask?:string, body?:string }	-
children	刮开蒙层显示的底部元素	ReactNode	-
coverColor	刮刮卡蒙版的颜色	string	#ddd
coverImg	刮刮卡蒙版的图片	string | Promise<any>	-
callbackInfo	刮开一定比例触发的回调信息	{ callback:()=>void,ratio:number }	-
width	刮刮卡宽度	number	240
height	刮刮卡高度	number	120

Ref

属性	说明	类型
canvasContainer	canvas 节点	HTMLCanvasElement
initDone	初始化完成	boolean
clearCard	清除蒙版	()=>void

开发

# install dependencies
$ pnpm install

# dev
$ pnpm dev

# push package
$ pnpm publish

LICENSE

MIT

scratch-card's Issues

比例单词radio拼写错误

callbackInfo 刮开一定比例触发的回调信息 { callback:()=>void,radio:number }，“radio”拼写错误，应该为ratio

手机端可用吗

支持 Vue3 版