search

Gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.
https://lottiereact.com
Other
786 stars 59 forks source link

Change the container div to a custom markup #110

Open Lamecarlate opened 6 months ago

Lamecarlate commented 6 months ago

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 commented 4 months ago

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:

image