react-scratch-coupon

Installation

yarn add react-scratch-coupon

Demo

• https://codesandbox.io/s/frosty-ellis-eq4m0

Usage

import ScratchCard from 'react-scratch-coupon'
import couponCover from './couponCover.jpg';

export default class Demo extends Component {
  render() {
    return <div>
      <h1>react-scratch-coupon Demo</h1>
	  <ScratchCard width={300} height={300} cover={couponCover}>
		<form className="form" >
			<h2>Hello There!</h2>
			<h1><code>Coupon code : 1651613335</code></h1>
			<div>
				<input type="text" name="code" placeholder="Coupon Code"></input>
			</div>
			<div>
				<input type="submit" value="Submit"></input>
			</div>
		</form>
	  </ScratchCard>
    </div>
  }
}

References

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
• https://github.com/dev-expert/react-scratch-coupon