{"_id":"@evilsamaritan/react-grid-layout","_rev":"11-faa3b61d2cf3d57a1f64587ffb987bf7","time":{"1.2.42":"2021-04-02T12:56:09.348Z","created":"2021-04-05T08:20:46.181Z","1.2.46":"2021-04-05T08:20:46.390Z","modified":"2022-09-19T09:09:14.137Z","1.2.47":"2022-09-19T09:01:20.626Z","1.2.48":"2022-09-19T09:09:14.049Z"},"name":"@evilsamaritan/react-grid-layout","dist-tags":{"latest":"1.2.48"},"versions":{"1.2.46":{"name":"@evilsamaritan/react-grid-layout","version":"1.2.46","description":"A draggable and resizable grid layout with responsive breakpoints, for React.","main":"index.js","scripts":{"lint":"make lint","test":"make test","build":"make build","build-example":"make build-example","view-example":"make view-example","dev":"make dev","prepublishOnly":"make build","validate":"npm ls","flow":"flow"},"repository":{"type":"git","url":"git+ssh://git@github.com/evilsamaritan/react-grid-layout.git"},"keywords":["react","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"Maksim Misiukevich","email":"misiukevich.pro@gmail.com","url":"http://strml.net/"},"license":"MIT","bugs":{"url":"https://github.com/STRML/react-grid-layout/issues"},"homepage":"https://github.com/STRML/react-grid-layout","dependencies":{"classnames":"2.x","lodash.isequal":"^4.0.0","prop-types":"^15.0.0","react-draggable":"^4.0.0","react-resizable":"^1.10.0"},"devDependencies":{"@babel/cli":"^7.13.0","@babel/core":"^7.13.8","@babel/plugin-proposal-class-properties":"^7.13.0","@babel/plugin-transform-flow-comments":"^7.12.13","@babel/preset-env":"^7.13.8","@babel/preset-flow":"^7.12.13","@babel/preset-react":"^7.12.13","@babel/register":"^7.13.8","babel-eslint":"^10.1.0","babel-jest":"^26.6.3","babel-loader":"^8.2.2","babel-plugin-preval":"^5.0.0","css-loader":"^5.1.1","ejs":"^3.1.6","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.1","eslint":"^7.21.0","eslint-plugin-flowtype":"^5.3.1","eslint-plugin-mocha":"^8.0.0","eslint-plugin-react":"^7.22.0","exports-loader":"^2.0.0","flow-bin":"^0.145.0","husky":"^5.1.2","imports-loader":"^2.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","lodash":"^4.17.21","opener":"^1.5.2","prettier":"^2.2.1","react":"^16.13.1","react-dom":"^16.13.1","react-hot-loader":"^4.13.0","react-transform-hmr":"^1.0.2","style-loader":"^2.0.0","timsort":"^0.3.0","webpack":"^5.24.2","webpack-cli":"^4.5.0","webpack-dev-server":"^3.11.2"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"jest":{"setupFilesAfterEnv":["<rootDir>test/util/setupTests.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testMatch":["<rootDir>/test/spec/*.js"],"testURL":"http://localhost"},"lint-staged":{"*.{js,jsx,css}":["prettier --write"]},"directories":{"example":"examples","lib":"lib","test":"test"},"gitHead":"cc57206bbda5ca28d490401a309ed0ea8b732b0f","_id":"@evilsamaritan/react-grid-layout@1.2.46","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ntAe5u2vAQejPbSa6Pa0u5QN2YbtQKtlfz88hQHH5op/FGLsbSgINqFc9jiIUxDMbxDuKH22Kg/rkVJkCGLNCQ==","shasum":"2fc0bde67b67de3fe6536a0e3d73fd984565829e","tarball":"https://registry.npmjs.org/@evilsamaritan/react-grid-layout/-/react-grid-layout-1.2.46.tgz","fileCount":44,"unpackedSize":735677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgasheCRA9TVsSAnZWagAAtk4P/1JNN2w5TvLW5HBQHicg\nL8zxXATKRN5ibKS0j/yk9bssW65l/j1sjpKoUesw9keRAp/jEsLBF274AFuI\nDc7l3+IX8/zIhwBYUlikTh3iahNHqKD8dVQUYyHfL61QUBLXzijMG9TxQ6x1\nz2rJKH9BTg2g0BZCbliEnxx9LMAqRMQnqaDySTV6KoK/2oroMh1ZYyc7PH2w\ngwcHLuv91QSPQFLA8RUIyBHFTVA65FFSW4cAFe0zXdv0p1WJH6Wi9W8j1xa4\nQnBZ5gF7tLrHA/3AgsJOpqeWel90A018AAXyV9tAajyxMipqnasW8MaYbI69\nl3idOwyjLEo0KMz4S6xxd8KvW9rW7kOeFYzGhS1IAB8127EE01m4inEhk/64\nJ8W5mrfNK6yyHZDgxdIcNtdvyWPJyYg+8qrlpnKhFs6P+TjmGAJtOE0KjiuO\nX8rl0LKVq3jj+WDReZ35IHfBP+pu3vLyGnsrTB+rH/OHb2FxqRAxkvkM8pD1\n5n7NtH/1sg0raztfrJYfB19iFaQO0j8lgosqB+dF/iYg4qVyf4KIS2rI4MTs\nzHDCQbNV2fwng4rA6P1J5fop+osxPLvbzNLRpvOB/gj2Wx7mDDtKTOua6WLD\nEuILezho2u49ax52aWxs4iaKJ6gDxTvbgzihivHOUDOrov/GkuPjmVDq4m95\nKlzX\r\n=57QH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTEhEZrWyx7BOCEkyWADvWYMrqEB5ftDWz5z3HKzEouAiEA6E1LhVx1rSbRAyj5hgBxCd1Awr7kbfhBDAGYNJ8Gpc0="}]},"_npmUser":{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"},"maintainers":[{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-grid-layout_1.2.46_1617610846242_0.5065061928262242"},"_hasShrinkwrap":false},"1.2.47":{"name":"@evilsamaritan/react-grid-layout","version":"1.2.47","description":"A draggable and resizable grid layout with responsive breakpoints, for React.","main":"index.js","scripts":{"lint":"make lint","test":"make test","build":"make build","build-example":"make build-example","view-example":"make view-example","dev":"make dev","prepublishOnly":"make build","validate":"npm ls","flow":"flow"},"repository":{"type":"git","url":"git+ssh://git@github.com/evilsamaritan/react-grid-layout.git"},"keywords":["react","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"Maksim Misiukevich","email":"misiukevich.pro@gmail.com","url":"http://strml.net/"},"license":"MIT","bugs":{"url":"https://github.com/STRML/react-grid-layout/issues"},"homepage":"https://github.com/STRML/react-grid-layout","dependencies":{"classnames":"2.x","lodash.isequal":"^4.0.0","prop-types":"^15.0.0","react-draggable":"^4.0.0","react-resizable":"^1.10.0"},"devDependencies":{"@babel/cli":"^7.13.0","@babel/core":"^7.13.8","@babel/plugin-proposal-class-properties":"^7.13.0","@babel/plugin-transform-flow-comments":"^7.12.13","@babel/preset-env":"^7.13.8","@babel/preset-flow":"^7.12.13","@babel/preset-react":"^7.12.13","@babel/register":"^7.13.8","babel-eslint":"^10.1.0","babel-jest":"^26.6.3","babel-loader":"^8.2.2","babel-plugin-preval":"^5.0.0","css-loader":"^5.1.1","ejs":"^3.1.6","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.1","eslint":"^7.21.0","eslint-plugin-flowtype":"^5.3.1","eslint-plugin-mocha":"^8.0.0","eslint-plugin-react":"^7.22.0","exports-loader":"^2.0.0","flow-bin":"^0.145.0","husky":"^5.1.2","imports-loader":"^2.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","lodash":"^4.17.21","opener":"^1.5.2","prettier":"^2.2.1","react":"^16.13.1","react-dom":"^16.13.1","react-hot-loader":"^4.13.0","react-transform-hmr":"^1.0.2","style-loader":"^2.0.0","timsort":"^0.3.0","webpack":"^5.24.2","webpack-cli":"^4.5.0","webpack-dev-server":"^3.11.2"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"jest":{"setupFilesAfterEnv":["<rootDir>test/util/setupTests.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testMatch":["<rootDir>/test/spec/*.js"],"testURL":"http://localhost"},"lint-staged":{"*.{js,jsx,css}":["prettier --write"]},"directories":{"example":"examples","lib":"lib","test":"test"},"types":"./index.d.ts","gitHead":"25519bc324b6a6190e72cdb4853938903f9bd4e6","_id":"@evilsamaritan/react-grid-layout@1.2.47","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-PrukVuZlXtEMwdazr9ulT9h1iqw1lUrkZq3NL8/ewJyP3LSHIXh7iUGMtb0Z91gJWGg992gXgzFiNL5ZU+YoXA==","shasum":"2d7090d219c8d727801297152f0001fb726fdb54","tarball":"https://registry.npmjs.org/@evilsamaritan/react-grid-layout/-/react-grid-layout-1.2.47.tgz","fileCount":1155,"unpackedSize":59905753,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5gG9e1G+lmdehB9w3dxVziE+MEj+0nO1B0qhjI/70TAiEAo7Wc1ZP10c5BV6l1koORPvj5L4iOQin4/n4mDbKucSg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKC/gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTSA//elfRTZtr4ZBIWlp/84wQQxHjr2805kX5qdIuUn+9mCc1m18N\r\nhyjdGn7zGHEhjCyIbSHu/WBN/LDw31zFt1rEV41fqVKe5SM+VLPXwEZOrEZB\r\nCYGSUOX2/YBHfU+/VGzKIg2fZ2E+v8P86Yn+XXYFWscU6MdbUjcT9HlEf0jx\r\nwTTyl5FvyrnXCotZUIMZ6cjgDc0noL4KaoPsxzp4cTEhPtkhvbKOO20QStq1\r\nwSihB+M2kHqvWEp/qEMuPK8n0iSTJZEHlwT3EMLJcSv1icsScvQx6scpqvEe\r\nfAwrqrfOlt5epWw5Wd6kSryeYuourTQcNwrMi6l6qitx/hzaMqb4axsOHL8G\r\nhxs8B2ow+MeGm2xBvDuEHL/AefvMyfyqyobAvByPpqMPifpYyfkz7khkKUpL\r\neXmgQRLlpNv5H/DsQ+kE9JVlJazOv7HbFfcX0oQ/+6I/ycP5DXribJl03k2+\r\nJ+kO6lPsw59sK/ZIubH8mus/3tk/9gpsu3ssWQUgLuHqQUp/7efImEXpgUSw\r\nEr+mPGhYPLgatjxbZ8El3+U4f/QDL5fTlchvZiSn8/o+FlhNOB0rRMEe7cYx\r\n79snRfJc60hTnRtu/ZckhotM4dIwFnpwEZyUj38cU+i5S2YyOYYz5JfijmJs\r\n4kAx2kHt9YxsqBk9frksjddLcl4UT9GAZoI=\r\n=/vz1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"},"maintainers":[{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-grid-layout_1.2.47_1663578079590_0.4630338915514334"},"_hasShrinkwrap":false},"1.2.48":{"name":"@evilsamaritan/react-grid-layout","version":"1.2.48","description":"A draggable and resizable grid layout with responsive breakpoints, for React.","main":"index.js","scripts":{"lint":"make lint","test":"make test","build":"make build","build-example":"make build-example","view-example":"make view-example","dev":"make dev","prepublishOnly":"make build","validate":"npm ls","flow":"flow"},"repository":{"type":"git","url":"git+ssh://git@github.com/evilsamaritan/react-grid-layout.git"},"keywords":["react","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"Maksim Misiukevich","email":"misiukevich.pro@gmail.com","url":"http://strml.net/"},"license":"MIT","bugs":{"url":"https://github.com/STRML/react-grid-layout/issues"},"homepage":"https://github.com/STRML/react-grid-layout","dependencies":{"classnames":"2.x","lodash.isequal":"^4.0.0","prop-types":"^15.0.0","react-draggable":"^4.0.0","react-resizable":"^1.10.0"},"devDependencies":{"@babel/cli":"^7.13.0","@babel/core":"^7.13.8","@babel/plugin-proposal-class-properties":"^7.13.0","@babel/plugin-transform-flow-comments":"^7.12.13","@babel/preset-env":"^7.13.8","@babel/preset-flow":"^7.12.13","@babel/preset-react":"^7.12.13","@babel/register":"^7.13.8","babel-eslint":"^10.1.0","babel-jest":"^26.6.3","babel-loader":"^8.2.2","babel-plugin-preval":"^5.0.0","css-loader":"^5.1.1","ejs":"^3.1.6","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.1","eslint":"^7.21.0","eslint-plugin-flowtype":"^5.3.1","eslint-plugin-mocha":"^8.0.0","eslint-plugin-react":"^7.22.0","exports-loader":"^2.0.0","flow-bin":"^0.145.0","husky":"^5.1.2","imports-loader":"^2.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","lodash":"^4.17.21","opener":"^1.5.2","prettier":"^2.2.1","react":"^16.13.1","react-dom":"^16.13.1","react-hot-loader":"^4.13.0","react-transform-hmr":"^1.0.2","style-loader":"^2.0.0","timsort":"^0.3.0","webpack":"^5.24.2","webpack-cli":"^4.5.0","webpack-dev-server":"^3.11.2"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"jest":{"setupFilesAfterEnv":["<rootDir>test/util/setupTests.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testMatch":["<rootDir>/test/spec/*.js"],"testURL":"http://localhost"},"lint-staged":{"*.{js,jsx,css}":["prettier --write"]},"directories":{"example":"examples","lib":"lib","test":"test"},"types":"./index.d.ts","gitHead":"a2bdf4568e3b38745ee0fad6c36e3b16e7d004af","_id":"@evilsamaritan/react-grid-layout@1.2.48","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-3qUHxd+qAr/5Z4hb17LNiAvvCxHMkeUN7fnqs+Llh+1poKPGWhLYu6bOTNXbTOn2smG2ATCwt7R1ubl6pjBmxg==","shasum":"e5deadb35c0cecd49c7874b4458f2f95f1bfc0fe","tarball":"https://registry.npmjs.org/@evilsamaritan/react-grid-layout/-/react-grid-layout-1.2.48.tgz","fileCount":44,"unpackedSize":733263,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDT/eXgMcMfnG9RNWtCvrZL4Y7GGUCqDRpK7RI2QdU9pAiEA6455t3+khdA41wLqNq1Y2IwZ976bOqUjh4EgHFPJZY0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKDG6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3+Q/+NOr1Vn9OBkwh8prvjAC7iDZAfDnTr1PD/Kq8mWWhDeSDHNR9\r\nPS+dvg+jmFPW5MiY5pTc5UaOkDOPsOXgrhZFlCSPrdiXHEeG82w0RwUAGoSU\r\nD9EO7+HcQcB4f7knjdodKCMXtvML2MNxmmtB5geqoLJ0H3nNL5xTZAxD44nO\r\nkTP62OKqCTw+cXvfYrZ0N4DR4ATGn9WZeo27fDX5QDA0ayqF9DGyGscwkMMi\r\nhOuUprOpJpiUaeLDDDQNnaC+fFHm0CVS/yRG9TsmxRpw9PCDJG3T84g1bljR\r\nzSKekv2d2aLpHh5fSkuQfkIIIKgE5pRpkT4kURAF+4lba8BDjLw8KHBrh1d2\r\nRANuVBFvLj9iy7lhnikO4q5cGtaLy70iFigKJzVJJyu8eyRVjK//19edRiHA\r\nsIPKbDCslJr0fnzIs16eCm/ScTUAQeVPj994HjdDLDmoF3jyuXiU3tPF57E/\r\n9tXs4UQgDSHxO5D79DTN6SKrhEGGGnBxeO8KKxUBcdI8BthngGzeg819J+nf\r\nFl12QeoX/PFfG6SLhVqQH5fCwff89jew4XaT7JF+8ZvrOtuCnsJOl0NabiKy\r\nCU1NgmCFMmX7Ji18UO5eEJ9Sx1kvthrjwA301o8F+WlBhgixl6DuJyWMLaVL\r\nqEc27DbonGJVQuy/Hx17hf4qX1+Tovt3Ggg=\r\n=NHHS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"},"maintainers":[{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-grid-layout_1.2.48_1663578553937_0.5496042370505858"},"_hasShrinkwrap":false}},"maintainers":[{"name":"evilsamaritan","email":"misiukevich.pro@gmail.com"}],"description":"A draggable and resizable grid layout with responsive breakpoints, for React.","homepage":"https://github.com/STRML/react-grid-layout","keywords":["react","grid","drag","draggable","resize","resizable","fluid","responsive"],"repository":{"type":"git","url":"git+ssh://git@github.com/evilsamaritan/react-grid-layout.git"},"author":{"name":"Maksim Misiukevich","email":"misiukevich.pro@gmail.com","url":"http://strml.net/"},"bugs":{"url":"https://github.com/STRML/react-grid-layout/issues"},"license":"MIT","readme":"# React-Grid-Layout\n\n[![travis build](https://travis-ci.org/STRML/react-grid-layout.svg?branch=master)](https://travis-ci.org/STRML/react-grid-layout)\n[![CDNJS](https://img.shields.io/cdnjs/v/react-grid-layout.svg)](https://cdnjs.com/libraries/react-grid-layout)\n[![npm package](https://img.shields.io/npm/v/react-grid-layout.svg?style=flat-square)](https://www.npmjs.org/package/react-grid-layout)\n[![npm downloads](https://img.shields.io/npm/dt/react-grid-layout.svg?maxAge=2592000)]()\n\nReact-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or\n[Gridster](http://dsmorse.github.io/gridster.js/), for React.\n\nUnlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user\nor autogenerated.\n\nRGL is React-only and does not require jQuery.\n\n![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)\n> GIF from production usage on [BitMEX.com](https://www.bitmex.com)\n\n[**[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]\n\n## Table of Contents\n\n- [Demos](#demos)\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Responsive Usage](#responsive-usage)\n- [Providing Grid Width](#providing-grid-width)\n- [Grid Layout Props](#grid-layout-props)\n- [Responsive Grid Layout Props](#responsive-grid-layout-props)\n- [Grid Item Props](#grid-item-props)\n- [User Recipes](../../wiki/Users-recipes)\n- [Performance](#performance)\n- [Contribute](#contribute)\n- [TODO List](#todo-list)\n\n## Demos\n\n1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)\n1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html)\n1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html)\n1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html)\n1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html)\n1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html)\n1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)\n1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html)\n1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html)\n1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html)\n1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)\n1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)\n1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)\n1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html)\n1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)\n1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)\n1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)\n1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)\n1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)\n\n#### Projects Using React-Grid-Layout\n\n- [BitMEX](https://www.bitmex.com/)\n- [AWS CloudFront Dashboards](https://aws.amazon.com/blogs/aws/cloudwatch-dashboards-create-use-customized-metrics-views/)\n- [Grafana](https://grafana.com/)\n- [Metabase](http://www.metabase.com/)\n- [HubSpot](http://www.hubspot.com)\n- [ComNetViz](http://www.grotto-networking.com/ComNetViz/ComNetViz.html)\n- [Stoplight](https://app.stoplight.io)\n- [Reflect](https://reflect.io)\n- [ez-Dashing](https://github.com/ylacaute/ez-Dashing)\n- [Kibana](https://www.elastic.co/products/kibana)\n- [Graphext](https://graphext.com/)\n- [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-)\n- [Quadency](https://quadency.com/)\n- [Hakkiri](https://www.hakkiri.io)\n- [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)\n- [Statsout](https://statsout.com/)\n\n*Know of others? Create a PR to let me know!*\n\n## Features\n\n* 100% React - no jQuery\n* Compatible with server-rendered apps\n* Draggable widgets\n* Resizable widgets\n* Static widgets\n* Configurable packing: horizontal, vertical, or off\n* Bounds checking for dragging and resizing\n* Widgets may be added or removed without rebuilding grid\n* Layout can be serialized and restored\n* Responsive breakpoints\n* Separate layouts per responsive breakpoint\n* Grid Items placed using CSS Transforms\n  * Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time\n* Compatibility with `<React.StrictMode>`\n\n|Version         | Compatibility    |\n|----------------|------------------|\n| >= 0.17.0      | React 16 & 17    |\n| >= 0.11.3      | React 0.14 & 15  |\n| >= 0.10.0      | React 0.14       |\n| 0.8. - 0.9.2   | React 0.13       |\n| < 0.8          | React 0.12       |\n\n## Installation\n\nInstall the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) package using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install react-grid-layout\n```\n\nInclude the following stylesheets in your application:\n\n```\n/node_modules/react-grid-layout/css/styles.css\n/node_modules/react-resizable/css/styles.css\n```\n\n## Usage\n\nUse ReactGridLayout like any other component. The following example below will\nproduce a grid with three items where:\n\n- users will not be able to drag or resize item `a`\n- item `b` will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks\n- users will be able to freely drag and resize item `c`\n\n```js\nimport GridLayout from 'react-grid-layout';\n\nclass MyFirstGrid extends React.Component {\n  render() {\n    // layout is an array of objects, see the demo for more complete usage\n    const layout = [\n      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},\n      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},\n      {i: 'c', x: 4, y: 0, w: 1, h: 2}\n    ];\n    return (\n      <GridLayout className=\"layout\" layout={layout} cols={12} rowHeight={30} width={1200}>\n        <div key=\"a\">a</div>\n        <div key=\"b\">b</div>\n        <div key=\"c\">c</div>\n      </GridLayout>\n    )\n  }\n}\n```\n\nYou may also choose to set layout properties directly on the children:\n\n```js\nimport GridLayout from 'react-grid-layout';\n\nclass MyFirstGrid extends React.Component {\n  render() {\n    return (\n      <GridLayout className=\"layout\" cols={12} rowHeight={30} width={1200}>\n        <div key=\"a\" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>\n        <div key=\"b\" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>\n        <div key=\"c\" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>\n      </GridLayout>\n    )\n  }\n}\n```\n\n### Usage without Browserify/Webpack\n\nA module usable in a `<script>` tag is included [here](/dist/react-grid-layout.min.js). It uses a UMD shim and\nexcludes `React`, so it must be otherwise available in your application, either via RequireJS or on `window.React`.\n\n### Responsive Usage\n\nTo make RGL responsive, use the `<ResponsiveReactGridLayout>` element:\n\n```js\nimport { Responsive as ResponsiveGridLayout } from 'react-grid-layout';\n\nclass MyResponsiveGrid extends React.Component {\n  render() {\n    // {lg: layout1, md: layout2, ...}\n    const layouts = getLayoutsFromSomewhere();\n    return (\n      <ResponsiveGridLayout className=\"layout\" layouts={layouts}\n        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}\n        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>\n        <div key=\"1\">1</div>\n        <div key=\"2\">2</div>\n        <div key=\"3\">3</div>\n      </ResponsiveGridLayout>\n    )\n  }\n}\n```\n\nWhen in responsive mode, you should supply at least one breakpoint via the `layouts` property.\n\nWhen using `layouts`, it is best to supply as many breakpoints as possible, especially the largest one.\nIf the largest is provided, RGL will attempt to interpolate the rest.\n\nYou will also need to provide a `width`, when using `<ResponsiveReactGridLayout>` it is suggested you use the HOC\n`WidthProvider` as per the instructions below.\n\nIt is possible to supply default mappings via the `data-grid` property on individual\nitems, so that they would be taken into account within layout interpolation.\n\n### Providing Grid Width\n\nBoth `<ResponsiveReactGridLayout>` and `<ReactGridLayout>` take `width` to calculate\npositions on drag events. In simple cases a HOC `WidthProvider` can be used to automatically determine\nwidth upon initialization and window resize events.\n\n```js\nimport { Responsive, WidthProvider } from 'react-grid-layout';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nclass MyResponsiveGrid extends React.Component {\n  render() {\n    // {lg: layout1, md: layout2, ...}\n    var layouts = getLayoutsFromSomewhere();\n    return (\n      <ResponsiveGridLayout className=\"layout\" layouts={layouts}\n        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}\n        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>\n        <div key=\"1\">1</div>\n        <div key=\"2\">2</div>\n        <div key=\"3\">3</div>\n      </ResponsiveGridLayout>\n    )\n  }\n}\n```\n\nThis allows you to easily replace `WidthProvider` with your own Provider HOC if you need more sophisticated logic.\n\n`WidthProvider` accepts a single prop, `measureBeforeMount`. If `true`, `WidthProvider` will measure the\ncontainer's width before mounting children. Use this if you'd like to completely eliminate any resizing animation\non application/component mount.\n\nHave a more complicated layout? `WidthProvider` [is very simple](/lib/components/WidthProvider.jsx) and only\nlistens to window `'resize'` events. If you need more power and flexibility, try the\n[SizeMe React HOC](https://github.com/ctrlplusb/react-sizeme) as an alternative to WidthProvider.\n\n### Grid Layout Props\n\nRGL supports the following properties (see the source for the final word on this):\n\n```js\n//\n// Basic props\n//\n\n// This allows setting the initial width on the server side.\n// This is required unless using the HOC <WidthProvider> or similar\nwidth: number,\n\n// If true, the container height swells and contracts to fit contents\nautoSize: ?boolean = true,\n\n// Number of columns in this layout.\ncols: ?number = 12,\n\n// A CSS selector for tags that will not be draggable.\n// For example: draggableCancel:'.MyNonDraggableAreaClassName'\n// If you forget the leading . it will not work.\ndraggableCancel: ?string = '',\n\n// A CSS selector for tags that will act as the draggable handle.\n// For example: draggableHandle:'.MyDragHandleClassName'\n// If you forget the leading . it will not work.\ndraggableHandle: ?string = '',\n\n// If true, the layout will compact vertically\nverticalCompact: ?boolean = true,\n\n// Compaction type.\ncompactType: ?('vertical' | 'horizontal') = 'vertical';\n\n// Layout is an array of object with the format:\n// {x: number, y: number, w: number, h: number}\n// The index into the layout must match the key used on each item component.\n// If you choose to use custom keys, you can specify that key in the layout\n// array objects like so:\n// {i: string, x: number, y: number, w: number, h: number}\nlayout: ?array = null, // If not provided, use data-grid props on children\n\n// Margin between items [x, y] in px.\nmargin: ?[number, number] = [10, 10],\n\n// Padding inside the container [x, y] in px\ncontainerPadding: ?[number, number] = margin,\n\n// Rows have a static height, but you can change this based on breakpoints\n// if you like.\nrowHeight: ?number = 150,\n\n// Configuration of a dropping element. Dropping element is a \"virtual\" element\n// which appears when you drag over some element from outside.\n// It can be changed by passing specific parameters:\n//  i - id of an element\n//  w - width of an element\n//  h - height of an element\ndroppingItem?: { i: string, w: number, h: number }\n\n//\n// Flags\n//\nisDraggable: ?boolean = true,\nisResizable: ?boolean = true,\nisBounded: ?boolean = false,\n// Uses CSS3 translate() instead of position top/left.\n// This makes about 6x faster paint performance\nuseCSSTransforms: ?boolean = true,\n// If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has \"transform: scale(n)\" css property,\n// we should set scale coefficient to avoid render artefacts while dragging.\ntransformScale: ?number = 1,\n\n// If true, grid items won't change position when being\n// dragged over.\npreventCollision: ?boolean = false;\n\n// If true, droppable elements (with `draggable={true}` attribute)\n// can be dropped on the grid. It triggers \"onDrop\" callback\n// with position and event object as parameters.\n// It can be useful for dropping an element in a specific position\n//\n// NOTE: In case of using Firefox you should add\n// `onDragStart={e => e.dataTransfer.setData('text/plain', '')}` attribute\n// along with `draggable={true}` otherwise this feature will work incorrect.\n// onDragStart attribute is required for Firefox for a dragging initialization\n// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313\nisDroppable: ?boolean = false\n// Defines which resize handles should be rendered\n// Allows for any combination of:\n// 's' - South handle (bottom-center)\n// 'w' - West handle (left-center)\n// 'e' - East handle (right-center)\n// 'n' - North handle (top-center)\n// 'sw' - Southwest handle (bottom-left)\n// 'nw' - Northwest handle (top-left)\n// 'se' - Southeast handle (bottom-right)\n// 'ne' - Northeast handle (top-right)\nresizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']\n// Custom component for resize handles\nresizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)\n\n//\n// Callbacks\n//\n\n// Callback so you can save the layout.\n// Calls back with (currentLayout) after every drag or resize stop.\nonLayoutChange: (layout: Layout) => void,\n\n//\n// All callbacks below have signature (layout, oldItem, newItem, placeholder, e, element).\n// 'start' and 'stop' callbacks pass `undefined` for 'placeholder'.\n//\ntype ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,\n                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;\n\n// Calls when drag starts.\nonDragStart: ItemCallback,\n// Calls on each drag movement.\nonDrag: ItemCallback,\n// Calls when drag is complete.\nonDragStop: ItemCallback,\n// Calls when resize starts.\nonResizeStart: ItemCallback,\n// Calls when resize movement happens.\nonResize: ItemCallback,\n// Calls when resize is complete.\nonResizeStop: ItemCallback,\n// Calls when an element has been dropped into the grid from outside.\nonDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void\n\n// Ref for getting a reference for the grid's wrapping div.\n// You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.\ninnerRef: ?React.Ref<\"div\">\n```\n\n### Responsive Grid Layout Props\n\nThe responsive grid layout can be used instead. It supports all of the props above, excepting `layout`.\nThe new properties and changes are:\n\n```js\n// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}\n// Breakpoint names are arbitrary but must match in the cols and layouts objects.\nbreakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},\n\n// # of cols. This is a breakpoint -> cols map, e.g. {lg: 12, md: 10, ...}\ncols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},\n\n\n// margin (in pixels). Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}.\nmargin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}\n\n\n// containerPadding (in pixels). Can be specified either as horizontal and vertical padding, e.g. `[10, 10]` or as a breakpoint -> containerPadding map, e.g. `{lg: [10, 10], md: [10, 10], ...}.\ncontainerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}\n\n\n// layouts is an object mapping breakpoints to layouts.\n// e.g. {lg: Layout, md: Layout, ...}\nlayouts: {[key: $Keys<breakpoints>]: Layout}\n\n//\n// Callbacks\n//\n\n// Calls back with breakpoint and new # cols\nonBreakpointChange: (newBreakpoint: string, newCols: number) => void,\n\n// Callback so you can save the layout.\n// AllLayouts are keyed by breakpoint.\nonLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,\n\n// Callback when the width changes, so you can modify the layout as needed.\nonWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;\n\n```\n\n### Grid Item Props\n\nRGL supports the following properties on grid items or layout items. When initializing a grid,\nbuild a layout array (as in the first example above), or attach this object as the `data-grid` property\nto each of your child elements (as in the second example).\n\nNote that if a grid item is provided but incomplete (missing one of `x, y, w, or h`), an error\nwill be thrown so you can correct your layout.\n\nIf no properties are provided for a grid item, one will be generated with a width and height of `1`.\n\nYou can set minimums and maximums for each dimension. This is for resizing; it of course has no effect if resizing\nis disabled. Errors will be thrown if your mins and maxes overlap incorrectly, or your initial dimensions\nare out of range.\n\nAny `<GridItem>` properties defined directly will take precedence over globally-set options. For\nexample, if the layout has the property `isDraggable: false`, but the grid item has the prop `isDraggable: true`, the item\nwill be draggable, even if the item is marked `static: true`.\n\n```js\n{\n\n  // A string corresponding to the component key\n  i: string,\n\n  // These are all in grid units, not pixels\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  minW: ?number = 0,\n  maxW: ?number = Infinity,\n  minH: ?number = 0,\n  maxH: ?number = Infinity,\n\n  // If true, equal to `isDraggable: false, isResizable: false`.\n  static: ?boolean = false,\n  // If false, will not be draggable. Overrides `static`.\n  isDraggable: ?boolean = true,\n  // If false, will not be resizable. Overrides `static`.\n  isResizable: ?boolean = true,\n  // By default, a handle is only shown on the bottom-right (southeast) corner.\n  // Note that resizing from the top or left is generally not intuitive.\n  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']\n  // If true and draggable, item will be moved only within grid.\n  isBounded: ?boolean = false\n}\n```\n\n### Performance\n\n`<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:\n\n\n```js\n// lib/ReactGridLayout.jsx\n// ...\nshouldComponentUpdate(nextProps: Props, nextState: State) {\n  return (\n    // NOTE: this is almost always unequal. Therefore the only way to get better performance\n    // from SCU is if the user intentionally memoizes children. If they do, and they can\n    // handle changes properly, performance will increase.\n    this.props.children !== nextProps.children ||\n    !fastRGLPropsEqual(this.props, nextProps, isEqual) ||\n    !isEqual(this.state.activeDrag, nextState.activeDrag)\n  );\n}\n// ...\n```\n\nIf you memoize your children, you can take advantage of this, and reap faster rerenders. For example:\n\n```js\nfunction MyGrid(props) {\n  const children = React.useMemo(() => {\n    return new Array(props.count).fill(undefined).map((val, idx) => {\n      return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;\n    });\n  }, [props.count]);\n  return <ReactGridLayout cols={12}>{children}</ReactGridLayout>;\n}\n```\n\nBecause the `children` prop doesn't change between rerenders, updates to `<MyGrid>` won't result in new renders, improving performance.\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\nIf you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js) to help\nus easily isolate it.\n\n## TODO List\n\n- [x] Basic grid layout\n- [x] Fluid grid layout\n- [x] Grid packing\n- [x] Draggable grid items\n- [x] Live grid packing while dragging\n- [x] Resizable grid items\n- [x] Layouts per responsive breakpoint\n- [x] Define grid attributes on children themselves (`data-grid` key)\n- [x] Static elements\n- [x] Persistent id per item for predictable localstorage restores, even when # items changes\n- [x] Min/max w/h per item\n- [ ] Resizable handles on other corners\n- [ ] Configurable w/h per breakpoint\n","readmeFilename":"README.md"}