{"_id":"@1-week/react-grid-layout","name":"@1-week/react-grid-layout","dist-tags":{"latest":"1.3.4"},"versions":{"1.3.4":{"name":"@1-week/react-grid-layout","version":"1.3.4","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","fmt":"prettier --write ./**.{json,js,yml,md}","fmt:check":"prettier --check ./**.{json,js,yml,md}"},"repository":{"type":"git","url":"git+ssh://git@github.com/STRML/react-grid-layout.git"},"keywords":["react","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"Samuel Reed","email":"samuel.trace.reed@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":{"clsx":"^1.1.1","lodash.isequal":"^4.0.0","prop-types":"^15.8.1","react-draggable":"^4.0.0","react-resizable":"^3.0.4"},"devDependencies":{"@babel/cli":"^7.17.3","@babel/core":"^7.17.5","@babel/eslint-parser":"^7.17.0","@babel/plugin-proposal-class-properties":"^7.16.7","@babel/plugin-transform-flow-comments":"^7.16.7","@babel/preset-env":"^7.16.11","@babel/preset-flow":"^7.16.7","@babel/preset-react":"^7.16.7","@babel/register":"^7.17.0","@webpack-cli/serve":"^1.6.1","babel-jest":"^27.5.1","babel-loader":"^8.2.2","babel-plugin-preval":"^5.1.0","css-loader":"^6.6.0","ejs":"^3.1.6","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint":"^8.9.0","eslint-plugin-flowtype":"^8.0.3","eslint-plugin-mocha":"^10.0.3","eslint-plugin-react":"^7.28.0","eslint-plugin-unicorn":"^41.0.0","exports-loader":"^3.0.0","flow-bin":"^0.172.0","husky":"^7.0.2","imports-loader":"^3.0.0","jest":"^27.5.1","lint-staged":"^12.3.4","lodash":"^4.17.21","opener":"^1.5.2","prettier":"^2.3.2","react":"^16.13.1","react-dom":"^16.13.1","react-hot-loader":"^4.13.0","react-transform-hmr":"^1.0.2","style-loader":"^3.2.1","timsort":"^0.3.0","webpack":"^5.69.1","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"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"],"testEnvironment":"jsdom","testURL":"http://localhost","coverageThreshold":{"global":{"statements":77,"branches":72,"functions":77,"lines":78}}},"lint-staged":{"*.{js,jsx,css}":["eslint --ext .js,.jsx --fix","yarn fmt"]},"gitHead":"ccd16038edb0257ac1d77cf72a2a2cabff3ac811","_id":"@1-week/react-grid-layout@1.3.4","_nodeVersion":"14.20.1","_npmVersion":"6.14.17","dist":{"integrity":"sha512-BulG5xCWasRim03WQWQNDhLCFYIqcoskfolbZoFL2/VYE6p13mBmHIuQRLT9w76+QCl6go5JVsU89+6c1s9LxA==","shasum":"22ff39a66a0f27a46779a55f16a25b6813fd2a7c","tarball":"https://registry.npmjs.org/@1-week/react-grid-layout/-/react-grid-layout-1.3.4.tgz","fileCount":33,"unpackedSize":493542,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2oL/+RehxipvZhWiVptzTVupt83oWyRquya1WImLkSAiAA5OjWJYZekv1nHSLzyiy3l60b22mWLd5mWMXo8iibdQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9xiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBzw/9EKnz0D4RXWybyhADDN5lKqDml57cY/JkfGaty+K5hUoHUFEf\r\nbRY5x6L4X3ON5UEg3VdSWChZo80B5OgY5a4PSaq9iNM3pV2znQ+riW7qCfvG\r\nT4k4O2b5jtpXcIUxvpwiq62ogqHiL62NoGrfkXPW2DRb4zSvppXLktEhCe+p\r\n8F+jLvALGYkTwWGFQoO7BhtxHvUKY/50YzfeZQAXjzopt02a7eurw3VhVceT\r\nphKYjN718cgrVe02LvnND0YO9y0Ag/mUz3exvUsz95IGLqS/HhujbOSz2aCG\r\nX1DY2iPmeCBA59IkhPDVZLu4GGxkifvTR8yC0qakEcUwnE2Ca1O0OR0V8MKT\r\n2gPDVETThpy/YH95yRxaI7umLhEs2FACVgIm9WQUGjsEz8R1JHzDahYkGR5t\r\n9hfv4hNqPhk2YQ3oB/yVq7fBwAJxAfYIxmDyyKmfNRDQKV66iok5h48Ebo8Y\r\n67i4DeAuazkEc9GCfBDnxdokOnOBquRjFaK8wdV9yO2PV/khAN/D5jZTrESo\r\n4UBK/JlTOy9LijQV7V5X0+IwugnEpo+GU3dYkqX1dytRqmmz1RtjP1iwuRAa\r\ncJWbXNDnC8qzARVuyDJiTfvvgD6Wk6vJhPOUsoGSiVrbBlKyes7P6hbSuglk\r\n7hbwd11yL+3i7YFIFuXChf6KHsROOEtoMZQ=\r\n=eoL8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1-week","email":"bayeszou@gmail.com"},"directories":{},"maintainers":[{"name":"1-week","email":"bayeszou@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-grid-layout_1.3.4_1677138098077_0.3250421602317324"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-23T07:41:37.996Z","1.3.4":"2023-02-23T07:41:38.243Z","modified":"2023-02-23T07:41:38.400Z"},"maintainers":[{"name":"1-week","email":"bayeszou@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/STRML/react-grid-layout.git"},"author":{"name":"Samuel Reed","email":"samuel.trace.reed@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\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)\n1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.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- [Datto RMM](https://www.datto.com/uk/products/rmm/)\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\n        className=\"layout\"\n        layout={layout}\n        cols={12}\n        rowHeight={30}\n        width={1200}\n      >\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 }}>\n          a\n        </div>\n        <div key=\"b\" data-grid={{ x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }}>\n          b\n        </div>\n        <div key=\"c\" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>\n          c\n        </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\n        className=\"layout\"\n        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      >\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\n        className=\"layout\"\n        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      >\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.\n// .react-resizable-handle\" is always prepended to this value.\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// Compaction type. \"wrap\" mode is handled for dragging\n// but does not yet cause any actual compacting.\ncompactType: ?('vertical' | 'horizontal' | 'wrap') = '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 can be placed one over the other.\n// If set, implies `preventCollision`.\nallowOverlap: ?boolean = false,\n\n// If true, grid items won't change position when being\n// dragged over. If `allowOverlap` is still false,\n// this simply won't allow one to drop on an existing object.\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\n// See `handle` as used in https://github.com/react-grid-layout/react-resizable#resize-handle\n// Your component should have the class `.react-resizable-handle`, or you should add your custom\n// class to the `draggableCancel` prop.\nresizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => 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\n//\n// Dropover functionality\n//\n\n// Calls when an element has been dropped into the grid from outside.\nonDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,\n// Calls when an element is being dragged over the grid from outside as above.\n// This callback should return an object to dynamically change the droppingItem size\n// Return false to short-circuit the dragover\nonDropDragOver: (e: DragOverEvent) => ?({|w?: number, h?: number|} | false),\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.\n// Note that this type is React.Ref<HTMLDivElement> in TypeScript, Flow has a bug here\n// https://github.com/facebook/flow/issues/8671#issuecomment-862634865\ninnerRef: {current: null | HTMLDivElement},\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```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### Custom Child Components and Draggable Handles\n\nIf you use React Components as grid children, they need to do a few things:\n\n1. Forward refs to an underlying DOM node, and\n2. Forward `style` and `className` to that same DOM node.\n\nFor example:\n\n```js\nconst CustomGridItemComponent = React.forwardRef(({style, className, ...props}, ref) => {\n  return (\n    <div style={{ /* styles */, ...style}} className={className} ref={ref}>\n      {/* Some other content */}\n    </div>\n  );\n}\n```\n\nThe same is true of custom elements as draggable handles using the `draggableHandle` prop. This is so that\nthe underlying `react-draggable` library can get a reference to the DOM node underneath, manipulate\npositioning via `style`, and set classes.\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/staging-bush-3lvt7?file=/src/ShowcaseLayout.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- [x] Resizable handles on other corners\n- [ ] Configurable w/h per breakpoint\n","readmeFilename":"README.md"}