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

Contents

1. 📌 Features
2. 🎯 Installation
3. 🕹️ Usage
4. 🧬 Props

📌 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. |

Contributing

Contributions are welcome! If you have suggestions for improvements or new features, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.