{"id":30746779,"url":"https://github.com/iamsmruti/react-gridscape","last_synced_at":"2025-10-28T08:03:49.933Z","repository":{"id":309194393,"uuid":"1035436320","full_name":"iamsmruti/react-gridscape","owner":"iamsmruti","description":"A powerful, flexible React component library for building interactive grid-based layouts and parking lot management systems. Design, visualize, and manage spatial layouts with drag-and-drop functionality, real-time editing, and comprehensive customization options.","archived":false,"fork":false,"pushed_at":"2025-08-10T12:26:30.000Z","size":1837,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-10T13:55:24.974Z","etag":null,"topics":["grid-layout","layout-builder","open-source","reactjs","reactjs-components","spatial-design"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-gridscape","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamsmruti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-10T11:54:14.000Z","updated_at":"2025-08-10T12:31:55.000Z","dependencies_parsed_at":"2025-08-10T13:55:26.789Z","dependency_job_id":"4de7b529-3d12-43e8-859d-8d31272fa022","html_url":"https://github.com/iamsmruti/react-gridscape","commit_stats":null,"previous_names":["iamsmruti/react-gridscape"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/iamsmruti/react-gridscape","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsmruti%2Freact-gridscape","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsmruti%2Freact-gridscape/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsmruti%2Freact-gridscape/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsmruti%2Freact-gridscape/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamsmruti","download_url":"https://codeload.github.com/iamsmruti/react-gridscape/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsmruti%2Freact-gridscape/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273550528,"owners_count":25125518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid-layout","layout-builder","open-source","reactjs","reactjs-components","spatial-design"],"created_at":"2025-09-04T04:29:08.678Z","updated_at":"2025-10-28T08:03:44.900Z","avatar_url":"https://github.com/iamsmruti.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React GridScape\n\nA powerful, flexible React component library for building interactive grid-based layouts and parking lot management systems. Design, visualize, and manage spatial layouts with drag-and-drop functionality, real-time editing, and comprehensive customization options.\n\n[![npm version](https://badge.fury.io/js/react-gridscape.svg)](https://badge.fury.io/js/react-gridscape)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n\n![](src/assets/1.png)\n\n![](src/assets/2.png)\n\n## ✨ Features\n\n- **🎯 Drag \u0026 Drop Interface**: Intuitive element placement with visual feedback\n- **📐 Grid-Based Layout**: Snap-to-grid positioning for precise alignment\n- **🔄 Element Management**: Add, remove, duplicate, and rotate elements\n- **⚙️ Properties Panel**: Real-time element configuration and customization\n- **📝 JSON Editor**: Import/export layouts with full JSON support\n- **📱 Responsive Design**: Works seamlessly across desktop and mobile devices\n\n## 🚀 Installation\n\n```bash\nnpm install react-gridscape\n```\n\n```bash\nyarn add react-gridscape\n```\n\n```bash\npnpm add react-gridscape\n```\n\n## 📋 Prerequisites\n\n- React 16.8+\n- TypeScript 4.5+ (for TypeScript projects)\n- Node.js 14+\n- TailwindCSS\n\n## 🎯 Quick Start\n\n### Basic Usage\n\n```tsx\nimport { Builder, BuilderProvider, useBuilderData } from \"react-gridscape\";\n\nconst App = () =\u003e {\n  return (\n    \u003cBuilderProvider\u003e\n      \u003cdiv className=\"w-full h-[100vh]\"\u003e\n        \u003cdiv className=\"bg-white shadow-sm border-b px-6 py-2\"\u003e\n          \u003cdiv className=\"flex items-center justify-between\"\u003e\n            \u003cdiv\u003e\n              \u003ch1 className=\"text-2xl font-bold text-gray-900\"\u003eParking Lot Builder\u003c/h1\u003e\n              \u003cp className=\"text-sm text-gray-500 mt-1\"\u003eDesign and manage your parking layouts\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv className=\"h-[calc(100vh-80px)]\"\u003e\n          \u003cBuilder /\u003e\n          \u003cLayoutViewer /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/BuilderProvider\u003e\n  )\n}\n\nfunction LayoutViewer() {\n  const { layoutData } = useBuilderData();\n  console.log(layoutData);\n  return \u003c\u003e\u003c/\u003e;\n}\n\nexport default App\n```\n\n### Controlled State Management\nYou will get the JSON equivalent of the Grid in layoutData from `useBuilderData()`.\n\n```json\n{\n  \"elements\": [\n    {\n      \"id\": \"road-horizontal-1754743517182\",\n      \"type\": \"road-horizontal\",\n      \"x\": 420,\n      \"y\": 240,\n      \"customId\": \"R1\"\n    },\n    {\n      \"id\": \"road-connector-1754743555140\",\n      \"type\": \"road-connector\",\n      \"x\": 480,\n      \"y\": 240,\n      \"customId\": \"R3\",\n      \"rotation\": 90\n    },\n    {\n      \"id\": \"parking-horizontal-1754743659720\",\n      \"type\": \"parking-horizontal\",\n      \"x\": 300,\n      \"y\": 300,\n      \"customId\": \"P8\",\n      \"spotInfo\": {\n        \"occupied\": false\n      }\n    },\n    {\n      \"id\": \"office-1754743694085\",\n      \"type\": \"office\",\n      \"x\": 420,\n      \"y\": 120,\n      \"customId\": \"E3\"\n    }\n  ],\n  \"metadata\": {\n    \"createdAt\": \"2025-08-09T12:45:14.554Z\",\n    \"updatedAt\": \"2025-08-09T12:45:14.554Z\",\n    \"gridSize\": 60\n  }\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\ngit clone https://github.com/your-org/react-gridscape.git\ncd react-gridscape\nnpm install\nnpm run dev\n```\n\n### Building\n\n```bash\nnpm run build        # Build for production\nnpm run build:watch  # Build in watch mode\nnpm run type-check   # Type checking\n```\n\n## 💖 Support\n\nIf you find this project helpful, please consider:\n- ⭐ Starring the repository\n- 🐛 Reporting bugs\n- 💡 Suggesting features\n- 🤝 Contributing code\n\n---\n\nMade with ❤️ by iamsmruti","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamsmruti%2Freact-gridscape","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamsmruti%2Freact-gridscape","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamsmruti%2Freact-gridscape/lists"}