React Torn Paper

A React component that creates a torn paper effect with random tears and rotation. This component adds a unique, handcrafted feel to your UI elements by simulating realistically torn paper edges with randomized tears and subtle rotation.

Features

• 🎨 Realistic torn paper effect
• 🔄 Random rotation for natural appearance
• 📱 Fully responsive
• 🎯 TypeScript support
• 🎉 Zero dependencies (except React)
• 🔧 Highly customizable

Installation

npm install react-torn-paper

Usage

import { TornPaper } from 'react-torn-paper';

function App() {
  return (
    <TornPaper className="bg-red-600">
      <h2 className="text-white">Hello World!</h2>
      <p className="text-gray-100">Your content goes here...</p>
    </TornPaper>
  );
}

Props

| Prop | Type | Default | Description | |-----------|--------------|---------|---------------------------------------------------| | children | ReactNode | - | Content to be displayed inside the torn paper | | className | string | '' | Additional CSS classes for styling |

Examples

Basic Usage

<TornPaper className="max-w-sm">
  <h2 className="text-xl font-bold mb-2 text-white">Basic Example</h2>
  <p className="text-gray-100">
    This is a basic example of the TornPaper component.
  </p>
</TornPaper>

Custom Background Color

<TornPaper className="max-w-sm bg-blue-500">
  <div className="text-center">
    <h2 className="text-2xl font-bold mb-3 text-white">Custom Background</h2>
    <p className="text-gray-100">
      Customize the background color using Tailwind classes.
    </p>
  </div>
</TornPaper>

Interactive Element

<TornPaper className="max-w-sm cursor-pointer hover:scale-105 transition-transform">
  <button className="w-full text-center text-white">
    <h2 className="text-xl font-bold">Interactive</h2>
    <p className="text-sm mt-2">Hover to see transform effect</p>
  </button>
</TornPaper>

Styling

The component is built with Tailwind CSS classes but works with any CSS solution. You can customize the appearance using the className prop:

• Background color
• Width and height
• Padding and margins
• Hover and animation effects
• Any other CSS properties

Browser Support

Works in all modern browsers that support SVG and CSS transforms:

• Chrome
• Firefox
• Safari
• Edge

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © StackBlitz