Hello dear friends,
i am tried to add some spine animation to my React app and it dont work (
Maybe i do something wrong?
i install npm packet "@esotericsoftware/spine-player": "4.2.18",
The component render a div but w/o any animation inside.
Please help me
Here is my code

import { useEffect, useRef } from "react";
import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";
import imageData from "../../images/spine/ai_girl/ai_girl.png";
import { SpinePlayer } from "@esotericsoftware/spine-player";

export default function SpineAnimationGirl() {
  const spineRef = useRef(null);
  const spineRoot = document.querySelector("#spine");
  useEffect(() => {
    if (spineRoot) {
      const spinePlayer = new SpinePlayer();
      spinePlayer.load({
        atlasText: atlasData,
        jsonText: jsonData,
        texture: imageData,
      });
      spinePlayer.trackEntry.setAnimation(0, "idle_anim", true);
      spineRoot.appendChild(spinePlayer.canvas);
    }
  }, []);
  return <div id="spine" style={{ width: "800px", height: "600px" }}></div>;``
Related Discussions
...

I added code tags to your post 😃 (use 3 back ticks `)

I'm afraid I'm not super familiar with React. But your Spine code is completely incorrect. Did you ask ChatGPT how to do this?

Have a look at the web player docs. It shows you many examples:
http://en.esotericsoftware.com/spine-player

E.g. try to replace everything inside if (spineRoot) { with:

new spine.SpinePlayer("player-container", {
	jsonUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",
	atlasUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"
});

Also note that you are using Spine Runtimes version 4.2 via NPM. The current release version is 4.1, while 4.2 is our beta release. Always fix the runtime version to the editor version you are using. More information here:

http://en.esotericsoftware.com/spine-versioning

yes, that was ChatGPT )
thank you for your advise.
I have one more questions - it is about backgroundColor.
I tried ti set it to the transparentm but i get all white 🙁
I set it like it says at documentation

 new spine.SpinePlayer("player-container", {
        jsonUrl: "%PUBLIC_URL%/spine/ai_girl/ai_girl.json",
        atlasUrl: "%PUBLIC_URL%/spine/ai_girl/ai_girl.atlas",
        animation: "idle_anim",
        showControls: false,
        backgroundColor: "#00000000",
        alpha: true,
        animation: "idle_anim",
        success: function (player) {
          setTimeout(() => console.log("hello"), 400);
        },
      });

but i get this effect
https://monosnap.com/file/jcB86RJvMRmp9Np7GYvno02rQfApoQ

how cat i set the background to transparent?

thank you again )

fixed with position absolute

5 days later

Sorry for the late reply, I missed your reply! Looks like you've figured it out 🙂

yes, thank you )
and then got and fixed another issue with rendering react component )

a year later

const spineRoot = document.querySelector("#spine");
Don't using querySelector outside useEffect
better:

import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";
import imageData from "../../images/spine/ai_girl/ai_girl.png";
import { SpinePlayer } from "@esotericsoftware/spine-player";

export default function SpineAnimationGirl() {
  const spineRef = useRef(null);
  useEffect(() => {
   const spineRoot = spineRef.current
    if (spineRoot) {
      const spinePlayer = new SpinePlayer();
      spinePlayer.load({
        atlasText: atlasData,
        jsonText: jsonData,
        texture: imageData,
      });
      spinePlayer.trackEntry.setAnimation(0, "idle_anim", true);
      spineRoot.appendChild(spinePlayer.canvas);
    }
  }, []);
  return <div id="spine" style={{ width: "800px", height: "600px" }} ref={spineRef}></div>;