https://github.com/mdtanvirahamedshanto/react-image-section-mapper-demo
https://github.com/mdtanvirahamedshanto/react-image-section-mapper-demo
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mdtanvirahamedshanto/react-image-section-mapper-demo
- Owner: mdtanvirahamedshanto
- Created: 2025-02-12T13:52:14.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-02-12T14:52:46.000Z (8 months ago)
- Last Synced: 2025-02-12T15:43:58.510Z (8 months ago)
- Language: TypeScript
- Homepage: https://react-image-section-mapper-demo.vercel.app
- Size: 881 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Image Section Mapper Demo
A demo for showcasing the usage of `react-image-section-mapper`, a TypeScript React component for creating interactive, resizable, and draggable sections on images.
### Features:
- 🎯 Create clickable sections on images
- 🖱️ Drag & resize sections with handles
- 📱 Responsive design
- 🎨 Customizable themes
- 💾 Save & load section data
- 🔒 Read-only mode
- 🎛️ Minimum size constraints
- 🔢 Maximum sections limit
- 🪝 Event hooks for clicks and hovers
## Demo
You can see the demo in action by cloning the repository and running it locally.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/react-image-section-mapper-demo.git
cd react-image-section-mapper-demo
```
2. Install the dependencies:
```bash
npm install
```
3. Run the app locally:
```bash
npm start
```
This will open the demo app in your browser at [http://localhost:3000](http://localhost:3000).
## Usage
This demo shows how to use `react-image-section-mapper` to add resizable and draggable sections to an image.
### Example Code
The `ImageSectionMapperDemo.tsx` component demonstrates how to use the library in a simple app:
```tsx
import React from 'react';
import { ImageSectionMapper } from 'react-image-section-mapper';
const ImageSectionMapperDemo = () => {
const handleSave = (sections: any[]) => {
console.log('Saved sections:', sections);
// You can save sections to your backend here
};
return (
Image Section Mapper Demo
);
};
export default ImageSectionMapperDemo;