reactjsloadingonloadonload-event

React: how can I call a function when a component has loaded?

I am trying to use Google's model-viewer web component to display a model on my website. The documentation says the component has a 'loaded' property which is 'read only' and 'returns true if the load event has fired since the last src change'. I'm trying to use this property to call a function when the component has loaded but I don't think I'm accessing it correctly. Should I be using componentDidUpdate to check if this property has changed? Or is there a way of using onload()?

My code so far looks like this:

class App extends Component {

  isLoaded() {
    console.log("loaded!")
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          loaded={this.isLoaded}
         />
      </>
    )
  }
}

export default App;
Solution

  • The thing is model-viewer you used in this case IS NOT a React component. That mean it has neither react component behavior nor life cycle.

    My solution is look for some other library as a wrapper like below: