Change the container div to a custom markup

[Lamecarlate]

Is your feature request related to a problem? Please describe.

I will have to use a Lottie animation in buttons, for loading buttons. But the animation is in a div container, which is invalid to put in buttons (and HTML validation is really important to me).

Describe the solution you'd like

I would like to have a "component" (or any other naming) prop on the Lottie element, to let us choose the markup of the animation container.

Describe alternatives you've considered

I don't have an alternative for now…

Additional context

The container is defined here: https://github.com/Gamote/lottie-react/blob/main/src/hooks/useLottie.tsx#L323 if I'm not mistaken.

Thanks a lot(…tie)(sorry).

[amoshydra]

Styled Component has this concept of "as" prop allowing user to switch out the underlying element to render. https://styled-components.com/docs/api#as-polymorphic-prop

Perhaps we can do something similar here:

import Lottie from "lottie-react";
import fancyLoadingAnimation from "./fancyLoading.json";

const Example = () =>
  <button>
    <Lottie
      as="span"
      animationData={fancyLoadingAnimation}
    />
    Loading
  </button>

I have created a PR #112 for this. Outcome:

[PetrBulanek]

Any updates on this? I would also appreciate this feature. Thanks a lot!

[Lamecarlate]

Hi! Is there progress on this? @amoshydra your PR looks great (to my uninitiated eye), did you see the comment on it? With the svg in svg?