https://github.com/zilbam/react-perspective-transform
A React Component library for perspective transformation and projection mapping
https://github.com/zilbam/react-perspective-transform
component-library frontend javascript perspective-transformation projection-mapping react typescript-react
Last synced: about 1 year ago
JSON representation
A React Component library for perspective transformation and projection mapping
- Host: GitHub
- URL: https://github.com/zilbam/react-perspective-transform
- Owner: ZilbaM
- Created: 2025-01-15T16:11:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-06T16:20:38.000Z (over 1 year ago)
- Last Synced: 2025-03-19T16:38:57.048Z (about 1 year ago)
- Topics: component-library, frontend, javascript, perspective-transformation, projection-mapping, react, typescript-react
- Language: TypeScript
- Homepage: https://zilbam.github.io/react-perspective-transform/
- Size: 23 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
[](./LICENSE)
## 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](https://zilbam.github.io/react-perspective-transform)**.
---
## Installation
```bash
npm install react-perspective-transform
# or
yarn add react-perspective-transform
```
## Quick Start
```tsx
import React from 'react';
import PerspectiveTransform from 'react-perspective-transform';
export default function App() {
return (
);
}
```
1. **Wrap your content** in ``.
2. **Press Shift + P** in the browser to toggle edit mode and drag corners.
3. 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](./docs/intro.md)** for:
- **Controlled vs. Uncontrolled** usage
- **Edit Mode** configuration and hotkeys
- **Persistence** with `storageKey`
- **TypeDoc** API reference
- **FAQ** and more
---
## Contributing
1. **Clone the repository**:
```bash
git clone https://github.com/ZilbaM/react-perspective-transform.git
cd react-perspective-transform
```
2. **Install dependencies**:
```bash
npm install
```
3. **Build**:
```bash
npm run build
```
5. **Open a pull request**:
- Please open an issue to discuss major changes.
- Ensure tests pass and updates are covered.
---
## License
[MIT License](./LICENSE) © 2025 ZilbaM