Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This library is no longer maintained. Making your own simple wrapper isn't difficult...

See original GitHub issue

If you need something complex, then react-lottie-player looks good. Otherwise the code below is all you need to display a lottie animation on your page. There is no play/pause logic here but that wouldn’t be too tricky to add. Just thought I’d post this in case anyone is wondering how much work it will be to get something working themselves.

import { useEffect, useRef } from "react"

import lottie from "lottie-web"

interface LottieProps {
  animationData: any
  width: number
  height: number

export const Lottie = ({ animationData, width, height }: LottieProps) => {
  const element = useRef<HTMLDivElement>(null)
  const lottieInstance = useRef<any>()

  useEffect(() => {
    if (element.current) {
      lottieInstance.current = lottie.loadAnimation({
        container: element.current,
    return () => {
  }, [animationData])

  return <div style={{ width, height }} ref={element}></div>

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:60
  • Comments:9

github_iconTop GitHub Comments

granolockscommented, Feb 9, 2022

I was getting this vibe too. Sad to see since it worked fairly well but this is a nice base for a shim. Thank you @funwithtriangles

funwithtrianglescommented, Aug 9, 2022

@funwithtriangles Could you help me get segments to work with this? I can’t seem to figure it out. I’m trying to get it to play all frames on the first loop, and then only frames 24-95 on every loop thereafter.

Currently, I have: segments: {[ [0, 23],[24, 95]], true},

Sorry, I don’t know the API very well! I was just posting a simple example that I thought might help others with similar simple needs. If you need anything more complex, then maybe react-lottie-player is more suitable.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Write a Wrapper Library | Irrational Exuberance - Lethain
To write a wrapper library is to create a layer of abstraction on top of an existing body of functionality. Each additional layer...
Read more >
Migrate from Enzyme | Testing Library
To ensure a successful migration, we recommend doing it incrementally by running the two test libraries side by side in the same application, ......
Read more >
Why You Should (Often) Wrap Your Dependencies
Learning when and how to wrap you dependencies can save you lots of future suffering.
Read more >
Using third-party libraries - always use a wrapper?
A huge advantage if you ever used a library which does not ... things that get more and more important the longer you...
Read more >
Should you wrap 3rd party libraries that you adopt into your ...
The main factor for deciding to wrap a library or not is the impact a library change will have on the code ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found