How To Implement React “useInView” Custom Hook | by Stefan Mares | Nov, 2022

intersection supervisor, animation, and multiple refs

photo by mathias reding Feather unsplash

In this article, I will present how to create a custom hook useInView And use this to animate some elements when they enter the user’s view.

As the docs say, it’s a browser API. A browser function allows us to perform an action when a specific element intersects a specific target (by default, the user viewport).

I strongly recommend reading docs,

what can it be used for

There are some good applications, such as:

  • pause/play video when exiting/entering scene
  • Count how many times an article or post has been read by a user
  • lazy loading of images or any other content
  • display some cool animations
  • Dynamic navigation bar based on scrolling

How to quickly set up an Intersection Observer in React

We’ll need a ref to target our element that needs to be in view. Observer will be installed in useEffectAnd we can have a state that flags the element as being viewed.

what happened here? We display a paragraph at the bottom of the page, and we want to flag when that element is in view and when it is not. For that, we keep a reference to it.

When the component is mounted, we create a new instance of an intersection observer. We pass our callback function that will fire when the observer detects that our element has entered or exited the scene. entries The parameter represents our target nodes, in our case, only paragraphs from the bottom of the page. then, we call observe method with our target, and finally, we make sure that the observer is disconnected when the component is unmounted.

how to remove it in custom hook

We love clean code, don’t we? It would be nice to use this in other components, but we certainly don’t want to repeat about 20 lines of code each. So, let’s break it out into a separate hook and also give it an overview of several elements. It would also be nice to have a unique identifier for each element. We can use an id or data-attributes.

Quick Info: Data attributes are additional properties that we can attach to an HTML element to store some information without any visual representation. We have to respect it even by applying the pattern data behind our property.

Here, our hook becomes a nice black box that takes our elements ref and returns an object with the name of the element (passed as a data-attribute) and a flag indicating the current element is visible.

What we do differently in the callback is that we try to get the name of the element. If none is found, we show an alert. Otherwise, we toggle the element in our elements object if it is intersected. We must be aware that each element must have a unique name.

And here’s our component refactored:

This is just a basic example. I want the final developer to decide what is best for their scenario. As stated earlier, IDs can be used instead of data-attributes. The hook can also be parameterized to receive the name of a data-property. We can return an array instead of an object etc.

Below, I have a demo that was presented in the article, where I also added how to trigger the smooth fade animation. Cheers 🍺!

Leave a Reply