✨ Fácil: usa inview: en tus classNames para aplicar estilos solo cuando tu componente aparezca en pantalla!
Añade un InviewSensor en tu componente para usar inview: en sus classNames. Así detectamos dinámicamente si el elemento está en pantalla solo cuando el componente está renderizado
Instalación 🚀
Instala el paquete usando npm:
npm i tailwind-inview
Uso 🛠️
Para comenzar, añade el plugin en el archivo tailwind.config.ts de tu proyecto
import inviewPlugin from 'tailwind-inview';
// ...
plugins: [..., inviewPlugin]
//...
Luego importa el InviewSensor del paquete tailwind-inview y úsalo dentro de tus componentes React. El InviewSensor va dentro de un useEffect para que dentro de este componente puedas añadir tantos inview: como quieras. Así de simple!✨
import React, { useEffect } from "react";
import { InviewSensor } from "tailwind-inview";
const Componente = () => {
useEffect(inViewSensor, []);
return (
<h1 className="inview:animate-bounce repeat-1">Texto Animado al Desplazarh1>
);
};
export default Componente;
