🟦 Rectangle Drawing App (React)

A lightweight, interactive React application that allows users to draw rectangles anywhere on the screen by simply clicking and dragging. Ideal for image annotation, design mockups, or UI testing tools.

🚀 Features

• 🖱️ Click-and-drag to draw rectangles
• 📦 Built using React (Hooks & functional components)
• 🔄 Real-time rendering while dragging
• ♻️ Customizable rectangle properties (coming soon)
• 🧰 Minimal dependencies, easy to extend

🧪 Demo

🛠️ Getting Started

1. Clone the Repo

git clone https://github.com/your-username/react-rectangle-drawer.git
cd react-rectangle-drawer

2. Install Dependencies

npm install
# or
yarn install

3. Start the App

npm start
# or
yarn start

The app will run at http://localhost:3000.

🧱 Basic Usage

• Click anywhere on the canvas to start drawing
• Drag to define the size of the rectangle
• Release the mouse to finish drawing

All rectangles are rendered live and stored in memory.

🧩 Project Structure

src/
├── components/
│   └── RectangleCanvas.tsx     # Main drawing logic
├── App.tsx                     # Entry component
├── index.tsx                   # React DOM mount
└── styles.css                  # Basic styling

🔮 Planned Features

• Resize or move rectangles
• Save drawn data to backend
• Add labels/tags to rectangles
• Export data (JSON/CSV)

🧑‍💻 Contributing

Feel free to fork this repo, improve it, and submit PRs!