Using ScrollReveal.js with React Hooks

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:

Comments

[Alardilap]

Hola, como seria con module.css?

[Alexei Savostyanov]

The components are drawn for a split second, and only then the animation starts to work. How to get rid of this?

[Henrique Ramos]

Can you send me an example?

[Alexei Savostyanov]

I used your code in codeandbox.

[Dulaj Prabasha]

Oh thanks! This will definitely come in handy