Can't control button show time in ReactJS

[lilyntalmers]

I'm trying to create a website in ReactJS but can't seem to be able to control button show time. I used to able to control button show time using this:

<script>
  const modelViewer = document.querySelector("model-viewer");
  const button = document.getElementById("arbutton");
  
  function checkagain() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain2 = setTimeout(showbutton, 5);
    }
  }
  function showbutton() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain1 = setTimeout(checkagain, 5);
    }
  } 
  modelViewer.addEventListener("load", function() {
    showbutton();
  });
</script>

From this link

And this is how I'm importing Model-Viewer in ReactJS:

<Helmet>
  <script
    type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
    async
  />
</Helmet>

<model-viewer
  ar ar-modes="webxr scene-viewer quick-look"
  style={{width:"100%", height:"50vh"}}
  alt="Your model Loading"
  //shadow-intensity="1"
  environment-image="neutral"
  exposure="1"
  poster="https://modelviewer.dev/assets/poster-astronaut.png"
  camera-controls
  loading="eager"
  src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" 
  enable-pan
>
<button id="arbutton" className="arbutton" slot="ar-button">👋 Show AR</button>
</model-viewer>

[elalish]

Not sure what changed, but have you considered an event listener instead of polling? https://modelviewer.dev/docs/#entrydocs-loading-events-modelVisibility

[lilyntalmers]

@elalish actually nothing changed. It's still works when used in a normal html website. But it doesn't seem to work when used in ReactJS. I think it's a ReactJS specific problem. I have tried to do it with useEffect like this:

React.useEffect(() => {
  const modelViewer = document.querySelector("model-viewer");
  const button = document.getElementById("arbutton");

  function checkagain() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain2 = setTimeout(showbutton, 5);
    }
  }

  function showbutton() {
    if (modelViewer.modelIsVisible === true) {
        button.style.display = "block";
    }
    else {
        checkagain1 = setTimeout(checkagain, 5);
    }
  } 

  modelViewer.addEventListener("load", function() {
    showbutton();
  });
  return () => {
    modelViewer.removeEventListener();
  };
}, [])

But it doesn't work.

Here is the button code:

<Helmet>
  <script
    type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
    async
  />
</Helmet>

<model-viewer
  ar ar-modes="webxr scene-viewer quick-look"
  style={{width:"100%", height:"100%"}}
  alt="My Model Loading"
  poster="https://modelviewer.dev/assets/poster-astronaut.png"
  camera-controls
  loading="eager"
  src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" 
  enable-pan
>
<button id="arbutton" className="arbutton" slot="ar-button">👋 Show AR</button>
</model-viewer>

I don't even know if I'm doing it wrong or if it isn't supposed to work!

[elalish]

Once again, an event listener is simpler and less likely to have race conditions and such. Not sure about ReactJS, but I'd guess there's just a bug somewhere. Start by simplifying things.

[lilyntalmers]

Thank you so much. I simplified and the code and it worked flawlessly. Maybe there was a bug in the code! :)