Function useAnimate

src/useAnimate.ts:16–81

(props: UseAnimateProps)

  | 'easeType'
>;
export default function useAnimate(props: UseAnimateProps): {
  isPlaying: boolean;
  style: React.CSSProperties;
  play: (isPlaying: boolean) => void;
} {
  const {
    start,
    end,
    complete,
    onComplete,
    delay = 0,
    duration = DEFAULT_DURATION,
    easeType = DEFAULT_EASE_TYPE,
  } = props;
  const transition = React.useMemo(
    () => `${ALL} ${duration}s ${easeType} ${delay}s`,
    [duration, easeType, delay],
  );
  const [animate, setAnimate] = React.useState<{
    isPlaying: boolean;
    style: React.CSSProperties;
  }>({
    isPlaying: false,
    style: { ...start, transition },
  });
  const { isPlaying, style } = animate;
  const onCompleteTimeRef = React.useRef<NodeJS.Timeout>();

  React.useEffect(() => {
    if ((onComplete || complete) && isPlaying) {
      onCompleteTimeRef.current = setTimeout(() => {
        if (onComplete) {
          onComplete();
        }

        if (complete) {
          setAnimate((animate) => ({
            ...animate,
            style: complete,
          }));
        }
      }, secToMs(delay + duration));
    }

    return () =>
      onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current);
  }, [animate, complete, delay, duration, isPlaying, onComplete]);

  return {
    isPlaying,
    style,
    play: React.useCallback(
      (isPlaying) => {
        setAnimate((animate) => ({
          ...animate,
          style: {
            ...(isPlaying ? end : start),
            transition,