React Peel
Guide
Examples
Api
Guide
Examples
Api

Getting Started

React Peel gives you a simple set of components and hooks for peel effects. Start with the core layers, then add presets or programmatic control as needed.

Installation

npm
pnpm
yarn
bun
1npm install react-peel

Basic Setup

A peel effect is a container with three layers:

  • PeelTop is the layer that peels back.
  • PeelBack is the underside of the peeled layer.
  • PeelBottom is the content revealed underneath.
1import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";
2
3function SimplePeel() {
4  return (
5    <PeelWrapper height={200} width={200} drag>
6      <PeelTop style={{ backgroundColor: "#81afcb" }} />
7      <PeelBack style={{ backgroundColor: "#a0c7df" }} />
8      <PeelBottom style={{ backgroundColor: "#688394" }}>
9        Hidden content
10      </PeelBottom>
11    </PeelWrapper>
12  );
13}

React Peel injects a small global style block that sets the peel container to position: relative and applies a few classes used by the effect. You can override those styles with your own CSS.

Presets

Presets provide a curated set of options and defaults:

Preset Best for
stickyNote Sticky notes and reminders
pageFlip Book or magazine page turns
revealCard Reveal cards and product promos
calendar Calendar flips
envelope Envelope flap open
giftCard Dramatic reveal with reflections
photoAlbum Photo albums
scratchCard Scratch-off reveals 
1<PeelWrapper preset="stickyNote" height={150} width={150} drag>
2  <PeelTop style={{ backgroundColor: "#fff9c4", padding: 16 }}>
3    Reminder
4  </PeelTop>
5  <PeelBack style={{ backgroundColor: "#fff59d" }} />
6  <PeelBottom style={{ backgroundColor: "#f5f5f5" }} />
7</PeelWrapper>

Programmatic Control

Use the usePeel hook to animate the peel position or read progress:

1import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";
2
3function RevealCard() {
4  const { peelRef, animate, reset } = usePeel();
5
6  const handleReveal = async () => {
7    await animate({
8      to: { x: -100, y: -100 },
9      duration: 800,
10      easing: "easeOut",
11    });
12  };
13
14  return (
15    <>
16      <button onClick={handleReveal}>Reveal</button>
17      <button onClick={reset}>Reset</button>
18
19      <PeelWrapper ref={peelRef} height={200} width={200}>
20        <PeelTop style={{ backgroundColor: "#e3f2fd" }} />
21        <PeelBack style={{ backgroundColor: "#bbdefb" }} />
22        <PeelBottom style={{ backgroundColor: "#90caf9" }}>
23          Surprise
24        </PeelBottom>
25      </PeelWrapper>
26    </>
27  );
28}

Configuration Basics

  • Use corner to choose the peel corner ("TOP_LEFT", "TOP_RIGHT", "BOTTOM_LEFT", "BOTTOM_RIGHT") or a custom { x, y } coordinate.
  • Use constraints to restrict how far the peel can move (single value or array).
  • Use peelPath and timeAlongPath to control motion along a line or bezier curve.
  • Use options for advanced shadow and reflection tuning.

Framework Notes

React Peel uses DOM APIs. For SSR frameworks like Next.js, render on the client:

1"use client";
2
3import { PeelWrapper, PeelTop, PeelBack, PeelBottom } from "react-peel";

Next Steps

ON THIS PAGE