Add percentage option for partial visibility

[chrisvoll]

Hello! This change introduces a new prop, minTopPercent, which allows you to trigger a visibility change when a certain percent of the child component is visible. Our use case is that we have elements with dynamic heights, where we're interested in detecting if they're 50% visible, rather than checking for a fixed pixel value.

For example, to check if a component is 80% visible, you could use:

<VisibilitySensor
  minTopPercent={0.8}
  onChange={onChange}
  partialVisibility
>
  {child}
</VisibilitySensor>

If this is merged, it would close #125

thanks!

[chrisvoll]

These markdown changes came from the prettier commit hook. I noticed that the commit hook wasn't covering the .jsx test file, so I updated it to include that

[vajkri]

Is this ready to be merged in @joshwnj? This'd be really neat feature to have :)

[Maxenboy]

is this stale? This would be awesome to have!!

[chrisvoll]

@Maxenboy I haven't heard anything, but my team ended up forking the library, and we plan to swap it out with intersection observers, which have support for percentage thresholds built in.

[ezeikel]

Just spent 30 minutes trying to implement this before realising it hasn't been merged yet!

I just did this until this gets merged in:

minTopValue={elementsHeightViaRef * 0.8}