feat: support alternative container via as prop

[amoshydra]

Summary

Provide a new prop as allowing container to be switched out to a user provided React.ElementType or React.ComponentType

Related to

Related to #110

How is this tested?

Tested with the following code snippet (This is not included in this PR / documentation change)

import React from "react";
import Lottie from "../../../src/components/Lottie";
import groovyWalkAnimation from "../../assets/groovyWalk.json";

const LottieAsExample = () => {
  return (
    <button>
      <Lottie
        animationData={groovyWalkAnimation}
        autoplay={true}
        as="span"
        style={{ display: 'inline-block', width: "2rem" }}
        data-testid="loading-graphic"
      />
      Loading
    </button>
  );
};

export default LottieAsExample;

[Xentox-Phil]

i love this addition but i have encountered a type problem with it everything else WORKS absolutely awesome!!!

my example involves imbeding it into an existing svg... therefore i also want to set svg props.

If i do this i get the error that y does not exist even tho everything works perfectly fine

i tried to fix it but didn't quite get it right

export type LottieOptions<CT extends (ElementType | ComponentType) = "div",T extends RendererType = "svg"> = Omit<
  AnimationConfigWithData<T>,
  "container" | "animationData"
> & {
  animationData: unknown;
  lottieRef?: LottieRef;
  onComplete?: AnimationEventHandler | null;
  onLoopComplete?: AnimationEventHandler | null;
  onEnterFrame?: AnimationEventHandler | null;
  onSegmentStart?: AnimationEventHandler | null;
  onConfigReady?: AnimationEventHandler | null;
  onDataReady?: AnimationEventHandler | null;
  onDataFailed?: AnimationEventHandler | null;
  onLoadedImages?: AnimationEventHandler | null;
  onDOMLoaded?: AnimationEventHandler | null;
  onDestroy?: AnimationEventHandler | null;
  as?: CT;
} & Omit<ComponentPropsWithRef<CT>, "loop" | "as">;

i redefined the LottieOptions to this so you are also able to pass these props

but then i got errors in the useLottie hook:

the problem is that the props of the wrapper get now passed to the config aswell...

Maybe you have a solution to this problem