If I want to use a javascript library like AOS in React, HOW?

Question

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?

I'd recommend something like [_react-reveal_](https://github.com/rnosov/react-reveal) instead. — Emile Bergeron, Dec 28 '19 at 03:55

wentjun · Accepted Answer · 2020-09-10T08:09:01.400

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,

Make sure to add `import "aos/dist/aos.css";` or the effect will not work (`aos@next`). — blackr1234, Sep 30 '20 at 19:56

Gabor Szabo · Answer 2 · 2020-10-01T20:08:01.583

20

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;

edited Oct 01 '20 at 20:08

answered Jun 19 '20 at 15:23

Gabor Szabo

201
2
6

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
5

+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

score 5 · Answer 3 · answered Aug 31 '21 at 16:48

5

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

answered Aug 31 '21 at 16:48

subhajit das

383
3
8

Ranul Navojith · Answer 4 · 2022-12-20T18:05:55.513

1

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
  }, []);

edited Dec 20 '22 at 18:05

answered Dec 20 '22 at 14:51

Ranul Navojith

21
4

vishwajit76 · Answer 5 · 2021-10-20T05:21:02.540

-1

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

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

edited Oct 20 '21 at 05:21

answered Aug 13 '21 at 14:58

vishwajit76

2,300
20
16

1

Your answer should be removed as it does not answer the question and does not apply to React. – Kuba Ch Oct 18 '21 at 19:08
It kind of applies to react, because you can either use or install the library locally or use npm or yarn. If installed locally then the answer above is relevant at least it is relevant to me. But yes it does not apply to the original question. – dave Sep 29 '22 at 00:16

If I want to use a javascript library like AOS in React, HOW?

5 Answers5

Linked