Recently, I released the , it's a React / component API that monitors an element enters or leaves the viewport (or another element) with performant and efficient way, using . It's lightweight and super flexible, which can cover all the cases that you need, like and videos, web app, , , and more. Try it you will 👍🏻 it! react-cool-inview hook Intersection Observer lazy-loading images infinite scroll triggering animations tracking impressions ⚡️ Try yourself: https://react-cool-inview.netlify.app Features 🚀 Monitors elements with performant and non-main-thread blocking way, using . Intersection Observer 🎣 Easy to use, based on React / . hook component 🎛 Super flexible design which can cover that you need. API all the cases 🖱 Supports , cool right?️ scroll direction ✌🏻 Supports . Intersection Observer v2 📜 Supports type definition. TypeScript 🗄️ Server-side rendering compatibility. 🦔 Tiny size ( ). No external dependencies, aside for the . ~ 1.2kB gzipped react Usage has a flexible design, it can cover simple to complex use cases for you. Here are some ideas for how you can use it. react-cool-inview API ⚠️ . You can also for full browser support. Most modern browsers support Intersection Observer natively add polyfill Basic Use Case To monitor an element enters or leaves the viewport by the state and useful sugar events. inView }, }, }, }); }; import { useInView } from "react-cool-inview" ; const App = () => { const { observe, unobserve, inView, scrollDirection, entry } = useInView({ threshold : 0.25 , // Default is 0 onChange : ( { inView, scrollDirection, entry, observe, unobserve } ) => { // Triggered whenever the target meets a threshold, e.g. [0.25, 0.5, ...] unobserve(); // To stop observing the current target element observe(); // To re-start observing the current target element onEnter : ( { scrollDirection, entry, observe, unobserve } ) => { // Triggered when the target enters the viewport onLeave : ( { scrollDirection, entry, observe, unobserve } ) => { // Triggered when the target leaves the viewport // More useful options... return < div ref = {observe} > {inView ? "Hello, I am 🤗" : "Bye, I am 😴"} </ div > ; Using as a Component Changes when it enters the viewport. The can be passed through the props. HelloText options ); ); import { InView } from "react-cool-inview" ; const HelloText = ( { inView, observe } ) => ( < div ref = {observe} > {inView ? "Hello, I am 🤗" : "Bye, I am 😴"} </ div > const App = () => ( < InView unobserveOnEnter > < HelloText /> </ InView > 💡 InView passes observe and other to the HelloText. props Lazy-loading Images It's super easy to build an image lazy-loading component with to boost the performance of your web app. react-cool-inview }); );
}; import { useInView } from "react-cool-inview" ; const LazyImage = ( { width, height, ...rest } ) => { const { observe, inView } = useInView({ // Stop observe when the target enters the viewport, so the "inView" only triggered once unobserveOnEnter : true , // For better UX, we can grow the root margin so the image will be loaded before it comes to the viewport rootMargin : "50px" , return ( < div className = "placeholder" style = {{ width , height }} ref = {observe} > {inView && < img { ...rest } /> } </ div > Infinite Scroll Infinite scroll is a popular design technique like Facebook and Twitter feed etc., new content is loaded as you scroll down a page. The basic concept as below. unobserve(); setTodos([...todos, ...res.todos]);
      });
    },
  }); );
}; import { useState } from "react" ; import { useInView } from "react-cool-inview" ; import axios from "axios" ; const App = () => { const [todos, setTodos] = useState([ "todo-1" , "todo-2" , "..." ]); const { observe } = useInView({ // For better UX, we can grow the root margin so the data will be loaded earlier rootMargin : "50px 0px" , // When the last item comes to the viewport onEnter : ( { unobserve } ) => { // Pause observe when loading data // Load more data axios.get( "/todos" ).then( ( res ) => { return ( < div > {todos.map((todo, idx) => ( < div ref = {idx === todos.length - 1 ? observe : null }> {todo} </ div > ))} </ div > Trigger Animations Another great use case is to trigger CSS animations once they are visible to the users. }); );
}; import { useInView } from "react-cool-inview" ; const App = () => { const { observe, inView } = useInView({ // Stop observe when the target enters the viewport, so the "inView" only triggered once unobserveOnEnter : true , // Shrink the root margin, so the animation will be triggered once the target reach a fixed amount of visible rootMargin : "-100px 0px" , return ( < div className = "container" ref = {observe} > < div className = {inView ? " fade-in " : ""}> I'm a 🍟 </ div > </ div > Track Impressions can also play as an impression tracker, helps you fire an analytic event when a user sees an element or advertisement. react-cool-inview unobserve(); },
  }); }; import { useInView } from "react-cool-inview" ; const App = () => { const { observe } = useInView({ // For an element to be considered "seen", we'll say it must be 100% in the viewport threshold : 1 , onEnter : ( { unobserve } ) => { // Stop observe when the target enters the viewport, so the callback only triggered once // Fire an analytic event to your tracking service someTrackingService.send( "🍋 is seen" ); return < div ref = {observe} > I'm a 🍋 </ div > ; Scroll Direction not only monitors an element enters or leaves the viewport but also tells you its scroll direction by the object. The object contains vertical (y-axios) and horizontal (x-axios) properties, they're calculated whenever the target element meets a . If there's no enough condition for calculating, the value of the properties will be . In addition, the value of the properties will sync with the scrolling direction of the viewport. react-cool-inview scrollDirection threshold undefined observe,
    inView, } = useInView({ },
  }); );
}; import useInView from "react-cool-inview" ; const App = () => { const { // vertical will be "up" or "down", horizontal will be "left" or "right" scrollDirection : { vertical, horizontal }, // Scroll direction is calculated whenever the target meets a threshold // more trigger points the calculation will be more instant and accurate threshold : [ 0.2 , 0.4 , 0.6 , 0.8 , 1 ], onChange : ( { scrollDirection } ) => { // We can also access the scroll direction from the event object console .log( "Scroll direction: " , scrollDirection.vertical); return ( < div ref = {observe} > < div > {inView ? "Hello, I am 🤗" : "Bye, I am 😴"} </ div > < div > {`You're scrolling ${vertical === "up" ? "⬆️" : "⬇️"}`} </ div > </ div > Intersection Observer v2 The Intersection Observer v1 can perfectly tell you when an element is scrolled into the viewport, but it doesn't tell you whether the element is covered by something else on the page or whether the element has any visual effects applied on it (like transform, opacity, filter etc.) that can make it invisible. The main concern that has surfaced is how this kind of knowledge could be helpful in preventing and UI redress attacks (read this to learn more). clickjacking article If you want to track the click-through rate (CTR) or impression of an element, which is actually visible to a user, can be the savior. Which introduces a new boolean field named . A value guarantees that an element is visible on the page and has no visual effects applied to it. A value is just the opposite. The characteristic of the is integrated with the state and related events (like onEnter, onLeave etc.) to provide a better DX for you. Intersection Observer v2 isVisible true false isVisible inView When using the v2, there're somethings we need to know: Check . If a browser doesn't support the v2, we will fallback to the v1 behavior. Understand .Visibility is much more expensive to compute than intersection, only use it when needed. browser compatibility how visibility is calculated To use Intersection Observer v2, we must set the and options. trackVisibility delay }, },
  }); }; import { useInView } from "react-cool-inview" ; const App = () => { // With Intersection Observer v2, the "inView" not only tells you the target // is intersecting with the root, but also guarantees it's visible on the page const { observe, inView } = useInView({ // Track the actual visibility of the target trackVisibility : true , // Set a minimum delay between notifications, it must be set to 100 (ms) or greater // For performance perspective, use the largest tolerable value as much as possible delay : 100 , onEnter : () => { // Triggered when the target is visible and enters the viewport onLeave : () => { // Triggered when the target is visible and leaves the viewport return < div ref = {observe} > {inView ? "Hello, I am 🤗" : "Bye, I am 😴"} </ div > ; Thanks for reading, for more usage details check out the project's GitHub page: https://github.com/wellyshen/react-cool-inview You can also install this package is distributed via . npm $ npm install --save react-cool-inview $ yarn add react-cool-inview # or

Facebook

Super

Target

Twitter

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Monitoring An Element As It Enters Or Leaves the Viewport Efficiently in React

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Monitoring An Element As It Enters Or Leaves the Viewport Efficiently in React

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES