jeftom / 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

Home Page:https://1587315093.github.io/scratch-card/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ScratchCard 刮刮卡(React 版)

NPM version NPM downloads GitHub

card

使用

欢迎提交 issuepr~

$ 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

About

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

https://1587315093.github.io/scratch-card/

License:MIT License


Languages

Language:TypeScript 89.2%Language:JavaScript 6.4%Language:Less 3.0%Language:Shell 1.3%