✨ 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:
Uso 🛠️
Para comenzar, añade el plugin en el archivo tailwind.config.ts de tu proyecto
// …
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 { InviewSensor } from “tailwind-inview“;
const Componente = () => {
useEffect(inViewSensor, []);
return (
<h1 className=“inview:animate-bounce repeat-1”>Texto Animado al Desplazar</h1>
);
};
export default Componente;
