DEV Community

Cover image for Using ScrollReveal.js with React Hooks

Using ScrollReveal.js with React Hooks

hnrq profile image Henrique Ramos Updated on ・1 min read

Today, I decided to improve my website by adding scroll reveal to it. For that, I chose jlmakes' ScrollReveal.js which solved my problem in a snap, the biggest problem was integrating it with React (Turns out, it was also a piece of cake).

The code

ScrollReveal.js provides a constructor ScrollReveal() that returns its instance. The method reveal() is responsible for registering the target element with ScrollReveal, it has a target argument (which can be a CSS Selector, a DOM Node, or an Array of Nodes) and an options argument which allows customizing the reveal behavior. That being said, we can use useRef hook to connect the React Node to ScrollReveal:

Discussion (2)

Editor guide
jdprabasha profile image
Dulaj Prabasha

Oh thanks! This will definitely come in handy

hnrq profile image
Henrique Ramos Author

My pleasure, my man! :D