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.
- Presets for common effects like sticky notes, page flips, and scratch cards
usePeelhook for programmatic control- Animation utilities and easing helpers
- Full TypeScript types
- Works with React 16.8+ and popular frameworks
Full documentation and examples: https://iqbal-rashed.github.io/react-peel
npm install react-peelimport { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
function MyComponent() {
return (
<PeelWrapper height={200} width={200} drag>
<PeelTop style={{ backgroundColor: "#81afcb" }} />
<PeelBack style={{ backgroundColor: "#a0c7df" }} />
<PeelBottom style={{ backgroundColor: "#688394" }}>
Content revealed here
</PeelBottom>
</PeelWrapper>
);
}The three layer components map to the peel effect layers:
PeelTopis the layer that peels back.PeelBackis the underside of the peeled layer.PeelBottomis the content revealed underneath.
<PeelWrapper preset="stickyNote" height={150} width={150} drag>
<PeelTop style={{ backgroundColor: "#fff9c4", padding: 16 }}>
Remember this
</PeelTop>
<PeelBack style={{ backgroundColor: "#fff59d" }} />
<PeelBottom style={{ backgroundColor: "#f5f5f5" }} />
</PeelWrapper>Available presets:
stickyNote, pageFlip, revealCard, calendar, envelope, giftCard, photoAlbum, scratchCard
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 (
<>
<button onClick={handleReveal}>Reveal</button>
<button onClick={reset}>Reset</button>
<PeelWrapper ref={peelRef} height={200} width={200}>
<PeelTop style={{ backgroundColor: "#e3f2fd" }} />
<PeelBack style={{ backgroundColor: "#bbdefb" }} />
<PeelBottom style={{ backgroundColor: "#90caf9" }}>
Surprise
</PeelBottom>
</PeelWrapper>
</>
);
}- 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").
MIT (c) Iqbal Rashed
Built on top of peel.js by Andrew Plummer