CODEWITHSUNDEEP
javascriptreactjsnpmshared-libraries
Keith Becker
Keith Becker

Reputation: 566

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

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?

Upvotes: 18

Views: 38435

Answers (5)

Ranul Navojith Dayarathne
Ranul Navojith Dayarathne

Reputation: 59

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

Upvotes: 1

vishwajit76
vishwajit76

Reputation: 2448

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

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

Upvotes: -1

subhajit das
subhajit das

Reputation: 445

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

Upvotes: 5

Gabor Szabo
Gabor Szabo

Reputation: 211

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;

Upvotes: 20

wentjun
wentjun

Reputation: 42526

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,

Upvotes: 31

Related Questions