{"action":"created","issue":{"url":"https://api.github.com/repos/STRML/react-grid-layout/issues/188","repository_url":"https://api.github.com/repos/STRML/react-grid-layout","labels_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/188/labels{/name}","comments_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/188/comments","events_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/188/events","html_url":"https://github.com/STRML/react-grid-layout/issues/188","id":142351000,"number":188,"title":"Check if an item is being resized (isResizing prop)","user":{"login":"kachkaev","id":608862,"avatar_url":"https://avatars.githubusercontent.com/u/608862?v=3","gravatar_id":"","url":"https://api.github.com/users/kachkaev","html_url":"https://github.com/kachkaev","followers_url":"https://api.github.com/users/kachkaev/followers","following_url":"https://api.github.com/users/kachkaev/following{/other_user}","gists_url":"https://api.github.com/users/kachkaev/gists{/gist_id}","starred_url":"https://api.github.com/users/kachkaev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kachkaev/subscriptions","organizations_url":"https://api.github.com/users/kachkaev/orgs","repos_url":"https://api.github.com/users/kachkaev/repos","events_url":"https://api.github.com/users/kachkaev/events{/privacy}","received_events_url":"https://api.github.com/users/kachkaev/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-03-21T13:43:03Z","updated_at":"2016-03-21T14:20:27Z","closed_at":null,"body":"I embedded a leaflet-based map into one of the grid items and would like to differentiate between the states when a component is being resized and when it is ‘stable’. In other words, I would like an item to have something like a ```isResizing``` prop supplied by ```react-grid-layout```.\r\n\r\nThe reason why this may be useful is the following:\r\n\r\n1) When a component is stable (not being resized), I would like to push all the changes in the state of the map (zoom, center, etc.) to some kind of a global state document.\r\n\r\n2) When a component is being resized, I would not like these changes to propagate. In case of a leaflet map, the resizing of a container requires calling ```invalidateSize()``` inside ```componentDidUpdate```, which creates a side-effect. The coordinates of the map center slightly change after each ```invalidateSize()``` because of lat/lon to pixel rounding. This results in too many tiny modifications of the global state per second, which is obviously not desirable.\r\n\r\nDebouncing a callback for ```onLeafletMoveend``` helps a bit, but is not ideal. When I drag the resize handler, stop for a bit without releasing the mouse button and then continue dragging, the change of the map state is being triggered despite that it should not (resizing has not finished yet). If a grid item was supplied with something like ```isResizing=true/false```, it would be possible to avoid this issue and all would be perfect.\r\n\r\nSorry for being too specific about the leaflet, but I guess this particular case represents a wider need to have ```isResizing``` prop or something similar.\r\n\r\nCheers and thanks a lot for such an awesome component!\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/STRML/react-grid-layout/issues/comments/199308175","html_url":"https://github.com/STRML/react-grid-layout/issues/188#issuecomment-199308175","issue_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/188","id":199308175,"user":{"login":"kachkaev","id":608862,"avatar_url":"https://avatars.githubusercontent.com/u/608862?v=3","gravatar_id":"","url":"https://api.github.com/users/kachkaev","html_url":"https://github.com/kachkaev","followers_url":"https://api.github.com/users/kachkaev/followers","following_url":"https://api.github.com/users/kachkaev/following{/other_user}","gists_url":"https://api.github.com/users/kachkaev/gists{/gist_id}","starred_url":"https://api.github.com/users/kachkaev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kachkaev/subscriptions","organizations_url":"https://api.github.com/users/kachkaev/orgs","repos_url":"https://api.github.com/users/kachkaev/repos","events_url":"https://api.github.com/users/kachkaev/events{/privacy}","received_events_url":"https://api.github.com/users/kachkaev/received_events","type":"User","site_admin":false},"created_at":"2016-03-21T14:20:27Z","updated_at":"2016-03-21T14:20:27Z","body":"Great, thanks for the tip! I've already been using this trick with a wrapped div to gain width and height in the child component, now there's one more prop:\r\n```js\r\nconst resizing = this.props.className.indexOf(' resizing ') !== -1;\r\n```\r\nAlthough the interface now works as expected, I guess it would be a bit more efficient to have a clean solution as you describe. My current implementation requires cloning components [as suggested in issue #14](https://github.com/STRML/react-grid-layout/issues/14#issuecomment-71090336), which may result some extra CPU work and hangs in older browsers."}}