Scratch Card | Scratch Card

🎁 开箱即用

仅需最小限度的配置即可使用

✨ 关注用户体验

经过精心优化，确保每一次刮卡都如丝般顺滑，带给用户前所未有的互动体验

🎉 功能完备

无论是自定义图案、刮卡效果还是交互逻辑，scratch card 都能轻松满足你的需求，功能一应俱全

Experience

Scratch with your mouse or finger

width

height

Available

Usage


<div className='flex items-center flex-col gap-4'>
  <div className="relative overflow-hidden rounded w-[400px]">
    <div className="text-primary-50 absolute z-[-1] flex h-full w-full items-center justify-center bg-gradient-to-br from-[#4ADE80] to-[#06B6D4] text-3xl">
      Thanks!
    </div>
    <ScratchCard
      id="usage-demo"
      width={480}
      height={270}
      ref={ref}
      cover="img/cover2.jpg"
    />
  </div>
  <div className='flex gap-4'>
    <Button
      onClick={() => {
        ref.current.finishScratching();
      }}
    >
      Finish
    </Button>
    <Button
      onClick={() => {
        ref.current.fillArea();
      }}
    >
      Reset
    </Button>
  </div>
</div>

API

attritube	type	description	default
id	`string`	The id of canvas DOM	`scratch-card`
width	`number`	The width of canvas DOM	-
height	`number`	The height of canvas DOM	-
available	`boolean`	If it's available to scratch	`true`
finishTransition	`boolean`	If the transition is enabled when it's finished	`true`
cover	`string`	Cover image of scratch card	-
threshold	`number`	Threshold to finish scratching automatically	`0.95`
fadeDuration	`number`	Duration for cover fade out	`1`
scratchRadius	`number`	Radius while scratching	`15`
fillStyle	`number`	FillStyle under img	`#fff`
onFill	`() => void`	Callback when fillArea	-
onFinishStart	`() => void`	Callback when finish transition start	-
onFinish	`() => void`	Callback when scratching finished	-