@owaiswiz/use-in-view

Check if your component is in viewport using this simple hook!

Usage no npm install needed!

<script type="module">
  import owaiswizUseInView from 'https://cdn.skypack.dev/@owaiswiz/use-in-view';
</script>

README

useInView

Check if your component is in viewport using this simple hook!

GitHub top language npm bundle size (scoped) David

⭐ ⭐ Check out a working demo here ⭐ ⭐

Install

$ yarn add use-in-view

Usage

import useInView from 'use-in-view';

const AnimatedComponent = () => {
    const offset = 30;
    const [ref, inView] = useInView(offset);

    return (
        <div className={`${inView && 'in-view'}`} ref={ref}>
            Animate me!
        </div>
    );
};