react-lottie

react-lottie copied to clipboard

Remove warning pertaining to React 17.x

This PR updates fix it: https://github.com/chenqingspring/react-lottie/pull/109

Great change 👍 Any plan to merge it soon?

Why this is not merged?

• 1

Bumping

This repo seems to no longer be maintained. Id suggest moving to https://github.com/airbnb/lottie-web as I did. I can give an example of how I used it here

import {
  useRef,
  useEffect,
  forwardRef,
  useImperativeHandle,
} from 'react';
import lottie, { AnimationConfigWithPath, AnimationItem } from 'lottie-web';

const Lottie = ({
  path,
  className = '',
  animationClassName = '',
  loop = false,
  renderer = 'svg',
  onComplete,
  speed,
  viewBoxOnly,
  testId = 'dk-lottie',
}: Props, ref: Ref) => {
  const containerRef = useRef(null);
  const animationRef = useRef<AnimationItem | null>(null);

  useEffect(() => {
    const rendererSettings = { viewBoxOnly, className: animationClassName.trim() };
    const loadAnimationConfig = {
      container: containerRef.current!,
      renderer,
      path,
      loop,
      autoplay: false,
      rendererSettings,
    };

    const animationCallback = () => {
      if (onComplete) {
        onComplete();
      }
    };

    animationRef.current = lottie.loadAnimation(loadAnimationConfig);

    /*
      If you want to be able to stop/play the instance through the animation ref, autoplay has to be set to false
      the animationRef.current.play() below is starting the animation on componentDidMount
      the equivalent of setting autoplay = true
    */

    animationRef.current!.play();

    if (speed) {
      animationRef.current!.setSpeed(speed);
    }

    animationRef.current!.addEventListener('complete', animationCallback);

    return () => {
      animationRef.current!.removeEventListener('complete', animationCallback);
      animationRef.current!.destroy();
    };
  });

  useImperativeHandle(ref, () => ({
    play: (name?: string) => {
      animationRef.current!.play(name);
    },
    stop: (name?: string) => {
      animationRef.current!.stop(name);
    },
  }));

  return (
    <div
      ref={containerRef}
      className={`dk-lottie ${className.trim()}`.trim()}
      data-testid={testId}
    />
  );
};

export const DKLottie = forwardRef(Lottie);