Usage with React - Documentation/Clarification

[jamesopti]

I'd like to explore using this new player in a React codebase.

Looking through the issues on the lottie-web player repo, I found this suggestion for creating a react wrapper: https://gist.github.com/olso/0d2aeff411092627a3fdba6fb6dac406

Will that approach work with jlottie? The API seems to be identical, so I'm hoping yes.

Thanks in advance! Excited to use the new and improved player 😎

[shaafiee]

Hi James,

The react wrapper you linked to would definitely work. We have tried to make jLottie's API as close to the current player's as possible.

The methods available and their usage is documented in the main readme. I have also just pushed an edit to it documenting the events dispatched. There should now be enough to build your react wrapper.

Keep us updated on how it goes. Throw us any queries, or discuss the expansion of jLottie API further, over at https://discord.gg/BVB2GrUb

[mmorkt]

It seems like this is related. I can't get jLottie to load my json-animation.
I'm using GatsbyJS, the same code works great with lottie-web-light.

Any ideas?

import React from "react"
import * as jLottie from '@lottiefiles/jlottie';

import reactLogo from "./animation.json"

const Animation = () => {
  

  React.useEffect(() => {
    jLottie.loadAnimation({
      container: document.querySelector("#react-logo"),
      animationData: reactLogo,
    });
  }, []);

  return (
    <div>
      <div id="react-logo" style={{ width: 500, height: 500 }} />
    </div>
  );


}

export default Animation

[shaafiee]

This problem is arising from jLottie assuming that animationData always contains a string literal (and thereafter parsing it to a JSON object every time). Hence, the following works for now:

function App() {
useEffect(() => {
jLottie.loadAnimation({
container: document.querySelector("#animation"),
animationData: JSON.stringify(anim)
});
});

return (

);
}

I will push up a fix that explicitly checks animationData to see if its a string literal, and only then parse it.

[mmorkt]

Thanks @shaafiee JSON.stringify(anim) fixed it. But the animation seems to break after a page load. Example when the page loads (guess the file isn't fully supported, but it breaks):

After navigating back to the page:

[shaafiee]

Would you be able to share the source for this animation? I could look at it and let you know exactly what features are not being supported - or workarounds, if any.

Unfortunately, at this time jLottie supports a limited number of features, so you will run into these issues with quite a few animations.

[mmorkt]

It's only a test file I found on Lottie Files:
https://assets3.lottiefiles.com/packages/lf20_2ilfg4zp.json

But its kind of weird that it breaks after navigating back to the page...

[mmorkt]

Just an update:
In Chrome I'm getting this error after navigating away from the animation:

One unhandled runtime error found in your files. See the list below to fix it:

Error in function u in ./node_modules/@lottiefiles/jlottie/dist/jlottie.min.js:4
Cannot read properties of null (reading 'setAttribute')

./node_modules/@lottiefiles/jlottie/dist/jlottie.min.js:4

[shaafiee]

Would like to follow up on the last comment: does the same issue persist?