How to install and use aos in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To install and use aos in React js, you have to use the npm or yarn package manager that is how you can install the aos library into your project.

Today, I am going to show you, how to install and use aos in react js.

Install aos

Install the following packages to use aos in react js.

npm

npm install aos --save

Table of contents

• Create a new React JS project.
• Import AOS in your React component.
• Import AOS in your React component.
• Add AOS to your HTML elements.

Let’s start with the first step.

Step 1: Create a new React JS project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import AOS in your React component.

After installing aos, you have to import your React component. To do this, add the following line to the top of your component file.

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

Step 3: Import AOS in your React component

The code you provided is a function named useEffect which uses aos to make a .init() request to the specified refresh().

function App() {
  useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);
}

Step 4: Add AOS to your HTML elements.

We need to add data-aos attribute to the HTML element that you want to animate.

<div data-aos="fade-up">Animate me!</div>

ReactJS use aos example.

This code below is an example, The AOS.init() function is used to initialize the AOS library, while the AOS.refresh() function is used to refresh component animations.

App.js

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

function App() {
  useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);

  return (
    <div data-aos="fade-up">Animate me!</div>
  );
}

export default App;

Check the output of the above code example.

Here, we are provided code sandbox links for the above program to install and use aos in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍