Visibility sensor hook for React.
It checks whether an element has scrolled into view or not. A lot of the logic is taken from react-visibility-sensor and is rewritten for the hooks proposal.
Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final.
You'll need to install
react-dom, etc at
|Returned object attributes||Type||Description|
|isVisible||Boolean||Is Ref visible or not|
|visibilityRect||Object||VisibilityRectangle containing coordinates of the container|
The first argument of the
useVisibilitySensor hook is a ref, the second argument is an options object. The available options are as follow:
intervalCheck: false - Accepts
int | bool, if an
int is supplied, that will be the interval in
ms and it keeps checking for visibility
partialVisibility: false - Accepts
bool | string : Tells the hook if partial visibility should be considered as visibility or not. Accepts
false and directions
containment: null - A
DOMNode element which defaults to
window. The element relative to which visibility is checked against
scrollCheck: true - A
bool to determine whether to check for scroll behavior or not
scrollDebounce: 250 - The debounce ms for scroll
scrollThrottle: -1 - The throttle ms for scroll. If throttle > -1, debounce is ignored.
resizeCheck: false - A
bool to determine whether to check for resize behavior or not
resizeDebounce: 250 - The debounce ms for resize
resizeThrottle: -1 - The throttle ms for resize. If throttle > -1, debounce is ignored.
shouldCheckOnMount: true - A
bool which determines whether an initial check on first render should happen or not.
minTopValue: 0 - An
int top value to determine what amount of top visibility should be considered for
- [x] Init
- [x] Scroll and Resize support
- [x] Debounce and throttling
- [x] Option to opt-out of initial check on mount
- [x] Documentation of all options
- [x] Tests _ WIP _
- [ ] More examples _ WIP _
You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.