joshwnj / react-visibility-sensor

Sensor component for React that notifies you when it goes in or out of the window viewport.
MIT License
2.33k stars 195 forks source link

Add option to detect visibility for contents with no width or height #167

Closed Gyanreyer closed 2 years ago

Gyanreyer commented 5 years ago

This PR would resolve issue #155

Changes:

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.