animare/lib/module/react/useAnimare.js

Advanced animation library for modern JavaScript.

import{useEffect,useState}from'react';/**
 * `useAnimare` custom React hook.
 *
 * @example
 *
 * import { useAnimare } from 'animare/react';
 *
 * useAnimare(() => {
 *   return animare(...params);
 *   // or
 *   return animare.single(...params);
 * }, []);
 *
 */export function useAnimare(callback){let deps=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];const[animation,setAnimation]=useState();useEffect(()=>{// clean previous
if(animation){animation.clearEvents();if(animation.timelineInfo.isPlaying)animation.pause();}// set new
const newAnimation=callback();setAnimation(newAnimation);// clean current
return()=>{newAnimation.clearEvents();if(newAnimation.timelineInfo.isPlaying)newAnimation.pause();};// eslint-disable-next-line react-hooks/exhaustive-deps
},deps);return animation;}