{"_id":"@arslankhan24/react-grid-builder","_rev":"2-8f038243a961c0af4a78745918bb2bb7","name":"@arslankhan24/react-grid-builder","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@arslankhan24/react-grid-builder","version":"1.0.0","keywords":["react","grid","builder","layout","nested","drag-and-drop","resizable","component-library"],"author":{"name":"Arslan Khan"},"license":"MIT","_id":"@arslankhan24/react-grid-builder@1.0.0","maintainers":[{"name":"arslankhan24","email":"coronakk27@gmail.com"}],"dist":{"shasum":"fb6be52cefd9c43e03aac222455769c1b499b19a","tarball":"https://registry.npmjs.org/@arslankhan24/react-grid-builder/-/react-grid-builder-1.0.0.tgz","fileCount":7,"integrity":"sha512-oIwSZjTQpbtzkooZB6USU+GrlIxSdv2drYrW876p6mfGX4f92M01XiTfSfVMEKO1iOZSvSzMvNxs84Q0eZmSlQ==","signatures":[{"sig":"MEQCIA5X3eyWvGDgGdGXOe+vVMOHIbrtoZspabEBjZ0STEMHAiA2j2HuOKoSAxlN8NlwhLW/Mjo45rsvMi3HoK/+fBNytg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62549},"main":"./dist/react-grid-builder.umd.js","type":"module","module":"./dist/react-grid-builder.es.js","exports":{".":{"import":"./dist/react-grid-builder.es.js","require":"./dist/react-grid-builder.umd.js"}},"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"arslankhan24","email":"coronakk27@gmail.com"},"_npmVersion":"10.8.2","description":"A reusable React grid layout builder with nested grid support.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"uuid":"^11.1.0","re-resizable":"^6.11.2","lodash.isequal":"^4.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.0","eslint":"^9.32.0","globals":"^16.3.0","postcss":"^8.5.6","@eslint/js":"^9.32.0","tailwindcss":"^4.1.11","@types/react":"^19.1.9","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.7","@tailwindcss/postcss":"^4.1.11","@vitejs/plugin-react":"^4.7.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-grid-builder_1.0.0_1754638253346_0.4509066670759263","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arslankhan24/react-grid-builder","version":"1.0.1","description":"A reusable React grid layout builder with nested grid support.","type":"module","main":"./dist/react-grid-builder.umd.js","module":"./dist/react-grid-builder.es.js","exports":{".":{"import":"./dist/react-grid-builder.es.js","require":"./dist/react-grid-builder.umd.js"}},"keywords":["react","grid","builder","layout","nested","drag-and-drop","resizable","component-library"],"author":{"name":"Arslan Khan"},"license":"MIT","scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"lodash.isequal":"^4.5.0","re-resizable":"^6.11.2","uuid":"^11.1.0"},"devDependencies":{"@eslint/js":"^9.32.0","@tailwindcss/postcss":"^4.1.11","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@vitejs/plugin-react":"^4.7.0","autoprefixer":"^10.4.21","eslint":"^9.32.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","postcss":"^8.5.6","tailwindcss":"^4.1.11","vite":"^7.1.0"},"_id":"@arslankhan24/react-grid-builder@1.0.1","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-CeuR2ShqoA6FBdUTF7EMntguNssf15uzdUeaNj28IMKZtzDvhyGRBvydNxeTwrv0yWVFtAGIAv/g6TGvjxjDrw==","shasum":"d92d67bbd7c390600e3e81cb5fb9cfab03cf7907","tarball":"https://registry.npmjs.org/@arslankhan24/react-grid-builder/-/react-grid-builder-1.0.1.tgz","fileCount":7,"unpackedSize":63453,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDLw/wf2L6YU103UXawT6Hg+ynVJ/BwEOBVYHXdN98UxAiEApWqz5XCeif2lHjrWANnTytjTtW5tUXbFlymIpNDKE2M="}]},"_npmUser":{"name":"arslankhan24","email":"coronakk27@gmail.com"},"directories":{},"maintainers":[{"name":"arslankhan24","email":"coronakk27@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-grid-builder_1.0.1_1754638591293_0.9953863036684336"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-08T07:30:53.125Z","modified":"2025-08-08T07:36:31.711Z","1.0.0":"2025-08-08T07:30:53.523Z","1.0.1":"2025-08-08T07:36:31.520Z"},"author":{"name":"Arslan Khan"},"license":"MIT","keywords":["react","grid","builder","layout","nested","drag-and-drop","resizable","component-library"],"description":"A reusable React grid layout builder with nested grid support.","maintainers":[{"name":"arslankhan24","email":"coronakk27@gmail.com"}],"readme":"# React Grid Builder\n\nA reusable, customizable React component library for building flexible grid layouts with full **nested grid** support. Ideal for website editors, dashboards, and layout builders.\n\n---\n\n## โจ Features\n\n- ๐งฑ Drag-and-drop grid builder\n- ๐ Nested grid support\n- ๐ Resizable, swappable grid items\n- ๐ง Undo/redo support\n- ๐พ Optional persistence\n- โ๏ธ Built with React 18+ and Vite\n\n---\n\n## ๐ฆ Installation\n\n```bash\nnpm install @arslankhan24/react-grid-builder\n# or\nyarn add @arslankhan24/react-grid-builder\n\n\"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^18.0.0 || ^19.0.0\"\n}\n\n Usage Example\n\nimport React from 'react';\nimport { GridProvider, GridContainer } from 'react-grid-builder';\nimport 'react-grid-builder/dist/style.css'; // Import the CSS globally\n\nfunction App() {\n return (\n \n \n \n );\n}\n\nexport default App;\n\nNested Grid Support\nWhen using GridContainer, clicking the pen icon on any block will open a nested grid editor with full functionality. The nested grid is fully editable, resizable, undoable, and updates the parent grid on close.\n\nYou donโt need to do anything special. Nested editing is built-in.\n\nComponents Overview\n\nGridProvider\nWraps your app to provide global grid context (required).\n\njsx\nCopy code\n\n \n\n\nGridContainer\nThe main editable grid interface. Handles layout, resizing, and nested grid editing.\n\njsx\nCopy code\n\n\nestedGridEditor\nYou donโt need to use this directly โ it's invoked automatically when you click the edit (pen) icon on a grid item.\n\n๐จ Styling\nGrid styles are applied via:\n\njs\nCopy code\nimport 'react-grid-builder/dist/style.css';","readmeFilename":"README.md"}