6

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?

Keith Becker
  • 406
  • 1
  • 3
  • 13

2 Answers2

15

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,

wentjun
  • 27,425
  • 7
  • 54
  • 65
9

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;
Gabor Szabo
  • 91
  • 1
  • 4
  • 2
    You might be missing the second argument in useEffect, depending on how often do you want the effect to run. – Dvid Silva Jun 19 '20 at 17:44
  • 1
    +1, yeah you will need the line `import "aos/dist/aos.css";` and make sure that you add the 2nd argument in `useEffect(func, arr)` which should probably be `[]` in this case. I just test it myself and it works well. – blackr1234 Sep 30 '20 at 19:54