add animationRef prop

[good-idea]

This PR adds the ability to use the animationItem returned from lottie-web in parent components. This allows for more control over the animation with all of the built-in functions like goToAndStop, goToAndPlay, etc.

In my use case, I want to have an animation play frames 0-100, then loop from 50-100:

const MyAnimation = () => {
  const animationRef = useRef(null)
  const onLoopComplete = () => {
    if (animationRef && animationRef.current) {
      animationRef.current.goToAndPlay(50, true)
    }
  }

  const lottieEventListeners = [
    {
      callback: onLoopComplete,
      name: 'loopComplete',
    },
  ]

  return (
     <Lottie
      config={config}
      lottieEventListeners={lottieEventListeners}
      animationRef={animationRef}
    />
  )
}

[lazysergey]

@good-idea hi mate thanks for PR, will review/merge it asap

[lazysergey]

@good-idea I have question - React.MutableRef-> shouldn't it be React.MutableRefObject instead?

[good-idea]

@lazysergey yep, you're right! I just opened a new PR

[flo-sch]

Hi guys, sorry to comment here, but how does this work with TypeScript?

I have tried:

import { AnimationItem } from 'lottie-web';

const Animation = () => {
  const animationRef = useRef<AnimationItem>(null);

  return (
    <Lottie
      // ...
      animationRef={animationRef}
    />
  );
};

Type 'RefObject<AnimationItem>' is not assignable to type 'MutableRefObject<AnimationItem>'.

And without initializing to null, but I really doubt that ref is supposed to be actually muted anyway?

import { AnimationItem } from 'lottie-web';

const Animation = () => {
  const animationRef = useRef<AnimationItem>();

  return (
    <Lottie
      // ...
      animationRef={animationRef}
    />
  );
};

Type 'MutableRefObject<AnimationItem | undefined>' is not assignable to type 'MutableRefObject<AnimationItem>'.
Type 'AnimationItem | undefined' is not assignable to type 'AnimationItem>'.
Type 'undefined' is not assignable to type 'AnimationItem>'.

[flo-sch]

EDIT: I managed to workaround by asserting a MutableRefObject:

const animation = useRef<AnimationItem>(null) as React.MutableRefObject<AnimationItem>;

But shouldn't it be just a RefObject in the end?

[good-idea]

@flo-sch I've updated this in #19, thanks for checking in here!