React Perspective Transform

A lightweight React component that applies a perspective transform to its children, allowing you to manipulate each corner independently. Perfect for interactive demos, image warping, or advanced UI effects.

Overview

react-perspective-transform handles corner-based transformations with just CSS matrix3d, preserving the crispness of text and images. It supports:

Draggable Corners: Press Shift + P (or custom keys) to toggle edit mode.
Controlled or Uncontrolled usage
Optional Local Storage persistence
Matrix-based transforms for smooth performance

For detailed documentation, including advanced usage, API reference, and guides, visit the official docs site.

Installation

npm install react-perspective-transform
# or
yarn add react-perspective-transform

Quick Start

import React from 'react';
import PerspectiveTransform from 'react-perspective-transform';

export default function App() {
  return (
    <div style={{ width: 400, height: 300, border: '1px solid #ccc' }}>
      <PerspectiveTransform>
        <img src="/path/to/image.jpg" alt="Warp Me" style={{ width: '100%' }} />
      </PerspectiveTransform>
    </div>
  );
}

Wrap your content in <PerspectiveTransform>.
Press Shift + P in the browser to toggle edit mode and drag corners.
Adjust the parent container’s width and height to see real transformations.

Documentation

Looking for advanced guides, API reference, or contribution docs? Check out the Complete Documentation for:

Controlled vs. Uncontrolled usage
Edit Mode configuration and hotkeys
Persistence with storageKey
TypeDoc API reference
FAQ and more

Contributing

Clone the repository:

git clone https://github.com/ZilbaM/react-perspective-transform.git
cd react-perspective-transform

Install dependencies:
```
npm install
```
Build and test:
```
npm run build
npm test
```
Open a pull request:
- Please open an issue to discuss major changes.
- Ensure tests pass and updates are covered.