react-use-visibility
React hook for tracking components visibility.
Electrons becoming excited as they enter the screen.
Installation
$ npm install --save react-use-visibility
Additionally, you'll need to install version 16.7.0-alpha.0
of react
and
react-dom
since this package relies on
React Hooks:
$ npm install --save react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0
DISCLAIMER: React Hooks are an experimental proposal. The Hooks API, as well as this library's, are unstable and subject to change.
Usage
;; { // Use a ref to attach to the element whose visibility you want to keep track of. const imgRef = ; // `current` points to the mounted img element. const isVisible = ; return <img ref=imgRef src=electron className=isVisible ? 'excited' : '' alt="an electron" /> ;}
API Reference
useVisibility
const isVisible = ;
Accepts a React element as the first argument (el
) and returns whether it is
on the screen or not.
Optionally, you can pass a second argument to useVisibility
that is an object
with the following properties:
partial
(boolean): Whether to consider the element visible when only a part of it is on the screen. Defaults tofalse
.scrollableEl
(Element): The parent element triggering the scroll event. Defaults towindow
.