-
-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Change the container div to a custom markup #110
Comments
Styled Component has this concept of "as" prop allowing user to switch out the underlying element to render. 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: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).
The text was updated successfully, but these errors were encountered: