Scratchy-card NPM

Scratchy Component

The Scratchy Card component is an interactive scratch card based on React that allows users to reveal hidden content in a fun and engaging way by scratching off a layer. Its highly customizable design perfectly adapts to any project, providing easy integration options that enhance the interactivity and engagement of your application.

Try the DEMO

📌 Features

Interactive Scratching: Users can scratch to reveal hidden content.
Customizable Appearance: Change the foreground and background colors, brush size, and border radius.
Responsive Design: Automatically adjusts to the size of the container.
Transition Effects: Smooth fading when the reveal is complete.

🎯 Installation

npm i scratchy-card

🕹️ Usage

To use the Scratchy component, import it and provide the required props:

import Scratchy from "./Scratchy";

const App = () => {
  return (
    <Scratchy
      imageSrc="path/to/your/image.jpg"
      foregroundColor="#C0C0C0"
      backgroundColor="#FFFFFF"
      brushSize={30}
      revealPercent={50}
      borderRadius={10}
      transitionDuration="1s"
    >
      <div>Your hidden content goes here!</div>
    </Scratchy>
  );
};

export default App;

🧬 Props

Prop	Type	Default Value	Description
`imageSrc`	string	-	Image URL for the scratchable layer.
`foregroundColor`	string	`#C0C0C0`	Color of the scratchable overlay (if no image).
`backgroundColor`	string	`#FFFFFF`	The background color behind the scratchable layer.
`brushSize`	number	`30`	The size of the brush used for scratching.
`width`	string	`100%`	The width of the card.
`height`	string	`100%`	The height of the card.
`revealPercent`	number	`50`	The percentage of the area that must be scratched to uncover content.
`transitionDuration`	string	`1s`	The duration of the reveal transition.
`borderRadius`	number	`0`	The border radius for the component.