✨ 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 Desplazar</h1>
);
};
export default Componente;
Top comments (0)