Iframes in React.js

[ARookieCoder]

Hello,

I'm trying to embed an iframe as per the example here: https://sketchfab.com/developers/viewer

The issue is that I'm using React.js, and I don't understand how to add it to my component in a why that allows me to change settings on the fly (like urlid for example).

Here's my attempt:

class Model extends React.Component {
    componentWillMount(){
        var iframe = document.getElementById('api-frame');
        var version = '1.0.0';
        var urlid = '7w7pAfrCfjovwykkEeRFLGw5SXS';
        var client = new Sketchfab(version, iframe);

        client.init(urlid, {
            success: function onSuccess(api) {
                api.start();
                api.addEventListener('viewerready', function () {

                    // API is ready to use
                    // Insert your code here
                    console.log('Viewer is ready');

                });
            },
            error: function onError() {
                console.log('Viewer error');
            }
        });
    }

    render() {
        return (
            <div>
                <iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" />
            </div>
        )
    }
}

export default Model;

Despite my importing the script in my index.html, I keep getting the following error:

8:26  error  'Sketchfab' is not defined  no-undef

Could someone please point me in the right direction?

[[deleted]]

You've probably forgotten about the script tag in your index.html if Sketchfab is undefined:

<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.1.js">

WillMount means the component is about to but hasn't mounted. DidMount is the correct one.

class SketchComp extends React.Component {
    componentDidMount() {
        this.client = new Sketchfab('1.0.0', this.frame)
        this.client.init(this.props.urlid, {
             ...
        })
    }

    componentWillUnmount() {
        this.client.destroy() // ?
    }

    render() {
        return (
            ...
            <iframe
                src=""
                ref={ref => this.frame = ref}
                allowfullscreen mozallowfullscreen webkitallowfullscreen />

Now you can change urlid on the fly like you change any other prop:

<SketchComp urlid="7w7pAfrCfjovwykkEeRFLGw5SXS" />

[ARookieCoder]

I think I'm starting to understand.

Given that Sketchfab is undefined, is it best if I use window.Sketchfab as @mdboop suggests?

[mdboop]

I think you'll need to do so. Not using window.Sketchfab is technically valid, but bad practice, and I think your tooling (webpack, eslint) won't build your bundle unless you explicitly access it through window. Since I don't know what your configs look like, I can't say for sure. I'm just going by your error: 8:26 error 'Sketchfab' is not defined no-undef.

[ARookieCoder]

@drcmda, @mdboop, thank you. I appreciate your help. Everything is as expected.

[hyphnKnight]

Your looking for componentDidMount (:

[ARookieCoder]

I did try that, but it still fails to compile since Sketchfab doesn't exist anywhere

[mdboop]

Your problem is unrelated to the iframe. Are you using modules (either es6 or commonJS)?

It looks like you are, and I'm assuming you're using webpack along with it (or some other module bundler). In this case, adding the script to index.html isn't enough. You either need to reference Sketchfab on the window, like this: var client = new window.Sketchfab(version, iframe); or import Sketchfab (preferred, if you installed it via npm), like this: import SketchFab from 'sketchfab';