🚀 Tailwind `inview:` aplica estilos cuando el componente entra en pantalla

#tailwindcss #react #frontend #animation

✨ 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;