React Peel

Important Note: This is the first release of react-peel. If you encounter any issues or have suggestions, please open an issue. Contributions and feedback are highly appreciated!

react-peel is a React wrapper around the original peel.js library by Andrew Plummer. It enables realistic peel effects in React applications with a flexible API to customize and control the peeling behavior.

🌐 Documentation

Explore the full documentation and examples at:
https://iqbal-rashed.github.io/react-peel

Installation

Install react-peel via npm:

npm install react-peel

Basic Usage Example

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

const MyComponent = () => {
  return (
    <PeelWrapper height={200} width={200} drag>
      <PeelTop style={{ backgroundColor: "#81afcb" }} />
      <PeelBack style={{ backgroundColor: "#a0c7df" }} />
      <PeelBottom style={{ backgroundColor: "#688394" }} />
    </PeelWrapper>
  );
};

export default MyComponent;

This example sets up a peel effect with customizable layers and enables drag interaction. You can style the peel layers and control the peel behavior through the available props.

PeelWrapper Props

Prop	Type	Description
ref	MutableRefObject<any> | undefined	Reference to the Peel instance, exposing methods and internal state.
className	string | undefined	CSS class applied to the PeelWrapper container.
height	string | number | undefined	Sets the height of the peel container.
width	string | number | undefined	Sets the width of the peel container.
options	object | undefined	Configuration options passed to the underlying peel.js instance. See peel.js options.
peelPosition	{ x: number; y: number } | undefined	Coordinates of the peel position, representing the corner currently peeling.
corner	{ x: number; y: number } | "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | undefined	Defines the corner from which the peel originates. Can be coordinate or corner name. Defaults to "BOTTOM_RIGHT".
constraints	{ x: number; y: number } | string | Array<{ x: number; y: number } | string> | undefined	List of constraints limiting how far the peel can extend, defined as coordinates or corner names.
drag	boolean | undefined	Enables peel dragging using mouse/touch to move the peel position dynamically.
mode	"book" | "calendar" | undefined	Predefined peel modes with specific constraints. Supported: "book" and "calendar".
fadeThreshold	number | undefined	Threshold (0 to 1) at which the top peel layer begins to fade out as it is peeled away.
timeAlongPath	number | undefined	Animates the peel along a predefined path at a given time (between 0 and 1). Throws error if no path is set.
peelPath	number[] | undefined	Defines the path (line or bezier curve) along which the peel moves.

Contribution

Contributions are very welcome! If you'd like to contribute, please review the Contributing Guide before submitting a pull request.

---