📦 use-is-on-screen
useIsOnScreen is a React Hook to check when the component is mounted.
!buildbuild-badgebuild !versionversion-badgepackage !MIT Licenselicense-badgelicense !downloadsdownloads-badgenpmtrends
Table of Contents
Motivation
- Check when a element is in the viewport
- Use React ref's to get the specific element
Usage
To start using theuse-is-on-screen
in your project, first install in your project:yarn add use-is-on-screen
or npm install use-is-on-screen
Single Element Ref
import useIsOnscreen from 'use-is-on-screen';
function App() {
const [isOnScreen, elementRef] = useIsOnscreen();
return (
<>
<header>Box visible: {isOnScreen ? 'YES' : 'NO'}</header>
<div className="wrapper">
<div ref={elementRef} className="box" />
</div>
</>
);
}
Multiple Element Refs
import useIsOnscreen from 'use-is-on-screen';
function App() {
const [isFirstOnScreen, firstElementRef] = useIsOnscreen();
const [isSecondOnScreen, secondElementRef] = useIsOnscreen();
return (
<>
<header>
First box visible: {isFirstOnScreen ? 'YES' : 'NO'}
<br />
Second box visible: {isSecondOnScreen ? 'YES' : 'NO'}
</header>
<div className="wrapper">
<div ref={firstElementRef} className="first box" />
<div ref={secondElementRef} className="second box" />
</div>
</>
);
}