I want to use the JavaScript library AOS (/) inside of my React application. How do I include it in my App.js file?

import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'aos';

function App() {

  AOS.init();

  return (
    <div className="App">
      <header className="App-header">
        <img data-aos={"fade-left"} src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href=""
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

AOS needs to be initialized, so I feel like I need to do something like I did in the above code, but it is throwing an error:

Failed to compile ./src/App.js Line 8:3: 'AOS' is not defined no-undef

How would I accomplish this in react?

I want to use the JavaScript library AOS (https://michalsnik.github.io/aos/) inside of my React application. How do I include it in my App.js file?

import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'aos';

function App() {

  AOS.init();

  return (
    <div className="App">
      <header className="App-header">
        <img data-aos={"fade-left"} src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

AOS needs to be initialized, so I feel like I need to do something like I did in the above code, but it is throwing an error:

Failed to compile ./src/App.js Line 8:3: 'AOS' is not defined no-undef

How would I accomplish this in react?

• javascript
• reactjs
• npm
• shared-libraries

Share Improve this question Follow edited Aug 27, 2021 at 22:40 Martijn Pieters 1.1m320320 gold badges4.2k4.2k silver badges3.4k3.4k bronze badges asked Dec 28, 2019 at 3:49 Keith BeckerKeith Becker 56611 gold badge66 silver badges1616 bronze badges 1

• 2 I'd recommend something like react-reveal instead. – Emile Bergeron Commented Dec 28, 2019 at 3:55

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 31

According to the documentation, You will need to call AOS.init() to initialise it within your component. This can be done within your componentDidMount lifecycle hook.

In addition, you should import it by referencing the defaultExport by doing this import AOS from 'aos';

If you are using class components, this is how your code should look like.

import AOS from 'aos';

componentDidMount() {
  // or simply just AOS.init();
  AOS.init({
    // initialise with other settings
    duration : 2000
  });
}

On the other hand, for functional components,

useEffect(() => {
  AOS.init({
    duration : 2000
  });
}, []);

Do remember to add an empty array as the dependency array such that the useEffect hook will only run once when the component is mounted,

With functional components and hooks (useEffect) I did like this:

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

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

  return (
    // your components
  );
}

export default App;

Do not forget to import 'aos/dist/aos.css'; I did that mistake waste heavy time .

First import the script and the stylesheet as follows:

import AOS from "aos";
import "aos/dist/aos.css";

Then initialize aos using useEffect

  useEffect(() => {
   AOS.init(); //You can add options as per your need inside an object
  }, []);

** Call init() function in Strict Mode in your app index.html file**

<script>
   (function ($) {
      'use strict';
        $(function() {
         AOS.init();
        });
    })(jQuery);
</script>