use-animate-presence is a React hook to animate components when they are mounted and unmounted using Web Animation API.
Install & Import:
# NPM $ npm i use-animation-presence --save
import { useAnimatePresence } from "use-animate-presence";
Basic usage:
const variants = { x: { from: -800, to: 0 }, }; export default function App() { const animatedDiv = useAnimatePresence({ variants, initial: "visible", }); return ( <div> <button onClick={() => animatedDiv.togglePresence()}>Toggle</button> {animatedDiv.isRendered && <div ref={animatedDiv.ref} />} </div> ); }
All default parameters:
variants: true; options: false; duration: 1000; initial: true; animateFirstRender: true; enter: (fn?: () => void) => void; exit: (fn?: () => void) => void; wait: (fn?: () => void) => void; debugName: "unknown";
Preview:
Download Details:
Author: jlkiri
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/jlkiri/use-animate-presence
License: MIT