React Peel

Realistic peel effects for React


---

React Peel is a React wrapper around peel.js that makes page peel, page flip, scratch card, and reveal effects easy to build. It ships with presets, hooks, and animation helpers, with no runtime dependencies beyond React.

Features

- Presets for common effects like sticky notes, page flips, and scratch cards
- usePeel hook for programmatic control
- Animation utilities and easing helpers
- Full TypeScript types
- Works with React 16.8+ and popular frameworks

Documentation

Full documentation and examples:
https://iqbal-rashed.github.io/react-peel

Installation

``bash
npm install react-peel
`

Basic Usage

`tsx
import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";

function MyComponent() {
return (




Content revealed here


);
}
`

The three layer components map to the peel effect layers:

- PeelTop is the layer that peels back.
- PeelBack is the underside of the peeled layer.
- PeelBottom is the content revealed underneath.

Presets

`tsx


Remember this




`

Available presets:
stickyNote, pageFlip, revealCard, calendar, envelope, giftCard, photoAlbum, scratchCard

Programmatic Control

`tsx
import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";

function RevealCard() {
const { peelRef, animate, reset } = usePeel();

const handleReveal = async () => {
await animate({
to: { x: -100, y: -100 },
duration: 800,
easing: "easeOut",
});
};

return (
<>
Reveal
Reset





Surprise



);
}
`

Notes

- React Peel injects a small global style block for the peel layers (you can override the classes in your own CSS).
- For SSR frameworks like Next.js, render the component on the client (for example with "use client"`).

License

MIT (c) Iqbal Rashed

---