Slim React Hook for showing elements on scroll as they enter the viewport
npm i use-scroll-display
or
yarn add use-scroll-display
import React from 'react';
import useScrollDisplay from 'use-scroll-display';
const App = () => {
const [displayRef, hasDisplayed] = useScrollDisplay();
// true if element has been displayed, false otherwise
console.log(hasDisplayed);
return (
<div ref={displayRef}>
Appears when entering the viewport
</div>
);
}
You can set the offset by passing a parameter.
It defaults to 200
const [displayRef] = useScrollDisplay(350);
Currently, only one animation is supported.
More will be added later.