Adds requireContentsSize prop which determines whether the sensor should be able to detect elements as visible even when they have no width or height
Why:
This resolves a problem introduced in pull request #114 which added a check that would prevent an element from being detected as visible if its client rect had no width and/or height. This was done for good reason - after all, this is a visibility sensor and the element is clearly not visible.
However, this change causes some problems for people who are trying to use react-visibility-sensor for lazy loading/rendering solutions. I had a scenario where I had a component which I only wanted to render when it entered or got near the viewport - otherwise, I would just render an empty div in its place. I ended up being forced to apply a style of min-height: 1px to the div to make it work, which is okay, but it's messy and that behavior felt unintuitive and unexpected to me until I actually dug into the source code to figure out what was happening. This new requireContentsSize prop helps both by making it more clear that contents without width or height will not be detected by default and providing developers with an option to disable that behavior if they need to.
This PR would resolve issue #155
Changes:
requireContentsSize
prop which determines whether the sensor should be able to detect elements as visible even when they have no width or heightWhy: This resolves a problem introduced in pull request #114 which added a check that would prevent an element from being detected as visible if its client rect had no width and/or height. This was done for good reason - after all, this is a visibility sensor and the element is clearly not visible.
However, this change causes some problems for people who are trying to use
react-visibility-sensor
for lazy loading/rendering solutions. I had a scenario where I had a component which I only wanted to render when it entered or got near the viewport - otherwise, I would just render an empty div in its place. I ended up being forced to apply a style ofmin-height: 1px
to the div to make it work, which is okay, but it's messy and that behavior felt unintuitive and unexpected to me until I actually dug into the source code to figure out what was happening. This newrequireContentsSize
prop helps both by making it more clear that contents without width or height will not be detected by default and providing developers with an option to disable that behavior if they need to.