Si quiero usar una biblioteca de javascript como AOS en React, ¿CÓMO?

Te recomendamos que revises esta respuesta en un entorno controlado antes de pasarlo a producción, saludos.

Solución:

De acuerdo con la documentación, deberá llamar AOS.init() para inicializarlo dentro de su componente. Esto se puede hacer dentro de su componentDidMount gancho de ciclo de vida.

Además, debe importarlo haciendo referencia a la defaultExport al hacer esto import AOS from 'aos';

Si está utilizando componentes de clase, así es como debería verse su código.

import AOS from 'aos';

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

Por otro lado, para los componentes funcionales,

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

Recuerde agregar un vacío array como la dependencia array tal que el useEffect hook solo se ejecutará una vez cuando el componente esté montado,

Con componentes funcionales y ganchos (useEffect) hice esto:

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;

Si crees que ha resultado de provecho nuestro artículo, sería de mucha ayuda si lo compartes con el resto seniors y nos ayudes a difundir esta información.

---

---

Utiliza Nuestro Buscador