Simple example / boilerplate / skeleton for a Lottie animation in react with lottie-web (no lottie react framework needed)

App.js

import LottieAnimationComponent from './components/LottieAnimationExampleComponent.js'

function App() {
  return (
    <div className="App">
      <LottieAnimationComponent/>
    </div>
  );
}

export default App;

LottieAnimationExampleComponent.js

import React, { useEffect, useState, useRef } from 'react'
import lottie from "lottie-web";

import lottieAnimationData from '../assets/lottie/lottie-test-animation.json';

// If animation loads static images:
// Change image paths in .json to "/lottie-images/" so it loads it them from public folder
// (Via https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js)

export default function AnimationComponent() {
    let [isPlaying, setIsPlaying] = useState(false);
    let [isStopped, setIsStopped] = useState(true);

    let lottieDomRef = useRef();
    let lottieAnimationRef = useRef();

    //let checkSvgDomInterval = useRef();

    function playAnimation(animationRef){
        //clearInterval(checkSvgDomInterval.current);
        //checkSvgDomInterval.current = setInterval(doEachInterval, 50);
        animationRef.current.play();
        setIsPlaying(true);
        setIsStopped(false);
    }

    function pauseAnimation(animationRef){
        animationRef.current.pause();
        setIsPlaying(false);
        //clearInterval(checkSvgDomInterval.current);
    }

    function stopAnimation(animationRef){
        animationRef.current.stop();
        setIsPlaying(false);
        setIsStopped(true);
        //clearInterval(checkSvgDomInterval);
    }

    function doEachInterval(){
        // Something you want to do repeatedly, in my case change color of certain elements
    }

    function onEnterFrame(animationRef){
        if (getFractionOfAnimationPlayed(animationRef) > 0.8) {
            //animationRef.current.removeEventListener('enterFrame');
        }
    }

    function onAnimationEnd(){
    	setIsPlaying(false);
        //clearInterval(checkSvgDomInterval)
    }

    function getFractionOfAnimationPlayed(animationRef){
        const durationInFrames = animationRef.current.getDuration(true);
        const currentFrame = animationRef.current.currentFrame;
        return currentFrame / durationInFrames;
    }

    useEffect(() => {
        loadAnimation(lottieAnimationRef, lottieDomRef, lottieAnimationData);
    }, []);

    function loadAnimation(animationRef, domRef, animationData){
        const options = {
            container: domRef.current,
            loop: false,
            autoplay: true,
            animationData: animationData,
        };
        animationRef.current = lottie.loadAnimation(options);
        animationRef.current.removeEventListener('complete');
        animationRef.current.removeEventListener('enterFrame');
        animationRef.current.addEventListener('complete', onAnimationEnd); /* via https://github.com/airbnb/lottie-web/issues/701 */
        animationRef.current.addEventListener('enterFrame', () => onEnterFrame(animationRef));
    }

    function deleteAnimation(domRef){
        domRef.current.innerHTML = '';
    }

    /* 

    // Reload animation
    deleteAnimation(lottieDomRef);
    loadAnimationHuman(lottieAnimationRef, lottieDomRef, lottieAnimationData);

    // Play animation
    playAnimation(lottieAnimationRef);

    // Pause animation
    pauseAnimation(lottieAnimationRef);
    
    // Stop animation
    stopAnimation(lottieAnimationRef);

    */

    return (<div>
		<div ref={lottieDomRef} />
	</div>)
}