{"action":"created","issue":{"url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/74","repository_url":"https://api.github.com/repos/ctrlplusb/react-sizeme","labels_url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/74/comments","events_url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/74/events","html_url":"https://github.com/ctrlplusb/react-sizeme/issues/74","id":171386786,"number":74,"title":"Optional clamping for reported width and height","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,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-16T11:35:58Z","updated_at":"2016-08-19T07:09:36Z","closed_at":null,"body":"Hey Sean,\r\n\r\nThanks a lot for your component – it saved me a couple of hours of life :–)\r\n\r\nNot sure you would want to take this on board, but here is a thought that came to me when I was using [Mapbox GL](https://github.com/uber/react-map-gl ) wrapped into `react-sizeme`. There was an issue when my container div shrunk to 0 – WebGL immediately threw a nasty error because thew viewport had to be at least 1 px in size. Here is my workaround for this:\r\n\r\n```js\r\n\r\n// MySuperMap = ...\r\n\r\n// Do not allow width / height be 0\r\nconst sizeMeFix = (ComponentToWrap) => ({ size, ...rest }) => {\r\n  const {\r\n    width,\r\n    height,\r\n  } = size || {};\r\n\r\n  const fixedSize = {\r\n    width: isNumber(width) ? Math.max(width, 1) : width,\r\n    height: isNumber(height) ? Math.max(height, 1) : height,\r\n  };\r\n\r\n  return <ComponentToWrap {...rest} size={fixedSize} />;\r\n};\r\n\r\nconst MySizedSuperMap = sizeMe({\r\n    monitorHeight: true,\r\n    refreshRate: 200,\r\n})(sizeMeFix(MySuperMap));\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MySizedSuperMap);\r\n```\r\n\r\nSo `sizeMe` is a wrapper for another wrapper called `sizeMeFix`, which makes sure that the wrapped component does not get incorrect numbers. I know I can `fix` the size right in the `render()` method of my component, but the size might be requested in a few other methods and this will create unwanted repetitions.\r\n\r\nThere might be other cases when reported width and height need to be clamped, so maybe having extra options like `reportedMinWidth`, `reportedMaxWidth`, `reportedMinHeight`, `reportedMaxHeight` can be a useful addition to your wrapper:\r\n\r\n```js\r\nconst MySizedSuperMap = sizeMe({\r\n   monitorHeight: true,\r\n   refreshRate: 200, \r\n   reportedMinHeight: 1,\r\n   reportedMinWidth: 1,\r\n})(MySuperMap);\r\n```\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/comments/240944890","html_url":"https://github.com/ctrlplusb/react-sizeme/issues/74#issuecomment-240944890","issue_url":"https://api.github.com/repos/ctrlplusb/react-sizeme/issues/74","id":240944890,"user":{"login":"ctrlplusb","id":12164768,"avatar_url":"https://avatars.githubusercontent.com/u/12164768?v=3","gravatar_id":"","url":"https://api.github.com/users/ctrlplusb","html_url":"https://github.com/ctrlplusb","followers_url":"https://api.github.com/users/ctrlplusb/followers","following_url":"https://api.github.com/users/ctrlplusb/following{/other_user}","gists_url":"https://api.github.com/users/ctrlplusb/gists{/gist_id}","starred_url":"https://api.github.com/users/ctrlplusb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ctrlplusb/subscriptions","organizations_url":"https://api.github.com/users/ctrlplusb/orgs","repos_url":"https://api.github.com/users/ctrlplusb/repos","events_url":"https://api.github.com/users/ctrlplusb/events{/privacy}","received_events_url":"https://api.github.com/users/ctrlplusb/received_events","type":"User","site_admin":false},"created_at":"2016-08-19T07:09:36Z","updated_at":"2016-08-19T07:09:36Z","body":"Hi! Thanks for this.\r\n\r\nI've just gotten back from an intense holiday :)\r\n\r\nI'll review this when I have gathered the pieces. :)"}}
{"actor":{"display_login":"ctrlplusb"}}