@rooks/use-visibility-sensor
Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using
npm install rooks
or
yarn add rooks
Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!
About
Visibility sensor hook for React.
Installation
npm install --save @rooks/use-visibility-sensor
Importing the hook
import useVisibilitySensor from "@rooks/use-visibility-sensor"
Usage
function Demo() {
const rootNode = useRef(null);
const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, {
intervalCheck: false,
scrollCheck: true,
resizeCheck: true
});
return (
<div ref={rootNode}>
<p>
{isVisible ? "Visible" : isVisible === null ? "Null" : "Not Visible"}
</p>
</div>
);
}
render(<Demo/>)
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, react-dom, etc at ^16.7.0-alpha.0
Demo
Returned Object keys
| Returned object attributes | Type | Description |
|---|
| isVisible | Boolean | Is Ref visible or not |
| visibilityRect | Object | VisibilityRectangle containing coordinates of the container |
Options
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 top, bottom, left and right
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 visibility
Todo
