Introduzione ad AutoAnimate in React

Mattepuffo's logo
Introduzione ad AutoAnimate in React

Introduzione ad AutoAnimate in React

AutoAnimate è una piccola ma potennte libreria per creare animazioni in Javascript e Typescript.

E' compatibile con diverse librerie / framework; in questo articolo vediamo come usarla in React.

Prima di tutto installiamola con npm:

npm install @formkit/auto-animate

Qui sotto un esempio in cui mostriamo/nascondiamo un test quando clicchiamo sul div:

import React from 'react';
import {useState, useRef, useEffect} from 'react'
import autoAnimate from '@formkit/auto-animate'
import './App.css';

function App() {
    const [show, setShow] = useState(false);
    const parent = useRef(null);
    const reveal = () => setShow(!show);

    useEffect(() => {
        parent.current && autoAnimate(parent.current)
    }, [parent]);

    return (
        <div id="parent" ref={parent}>
            <strong className="dropdown-label" onClick={reveal}>Clicca!</strong>
            {show && <p className="dropdown-content">
                <hr/>
                Questo è il testo nascosto!
            </p>}
        </div>
    );
}

export default App;

Come vedete c'è un'animazione, e per impostarla abbiamo usato pochissimo codice.

Questo il CSS che ho usato per visualizzare meglio la pagina (non è obbligatorio ovviamente):

#parent {
    margin: 50px auto;
    padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
    width: 70%;
}

Enjoy!


Condividi

Commentami!