Implementing 3rd party .js file in react JS

Question

I am having issue in calling a 3rd party javascript in my react project.

I called like this in index.html file inside body tag

<body>
    <script src="https://zwibbler.com/zwibbler-demo.js"></script>
</body

I also called the script in <head> tag but that also didn't work.

I am able to fetch and use it successfully in my fresh create-react-app, but when I integrate it to my existing react project, the script shows it loaded in network tab but does not render the output. What should I do to load it?

I also called script in componentDidMount as shown below, but that doesn't work:

componentDidMount() {
      const script  = document.createElement("script");
      script.src = "https://zwibbler.com/zwibbler-demo.js";
      document.body.appendChild(script);
}

The component in which I am using it (3rd party lib) comes after two or three routes later, means user has to do some action/events to get to render that component, so is it due to these event that i can not use the library? Or simply how do I call that script when the component loads? I have already tried componentWill/DidMount().

Include script "https://zwibbler.com/zwibbler-demo.js in index.js — Salman Arshad
– Salman Arshad, Commented Jul 27, 2020 at 17:26

vipin joshi · Accepted Answer · 2020-07-27 19:44:43Z

1

i got the solution, thanks everyone for helping and supporting the solution was i need not to worry about the script being loaded, i have to just call a script in index.html and then i wrote my component like this

class ZwibblerComponent extends React.Component {
    render() {
        return (
            <div>
                Some sample buttons<br />
                <button onClick={() => this.ctx.useBrushTool()}>Brush</button>
                <button onClick={() => this.ctx.download("zwibbler3", "drawing.zwibbler")}>Save to computer</button>
                <button onClick={() => this.ctx.openFromComputer()}>Open from computer</button>

                <div ref={el => this.el = el}
                    style={{ width: "500px", height: "500px" }}>
                </div>
            </div>
        )
    }

    componentDidMount() {
        this.ctx = Zwibbler.create(this.el, {
            setFocus: false,
            showToolbar: false,
        })
    }

    componentWillUnmount() {
        this.ctx.destroy();
        console.log("Destroying");
    }

}

ahh... finally its solved, if any one is looking for zwibbler implmentation in react.js... its here folks.

answered Jul 27, 2020 at 19:44

vipin joshi

571 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Narendra Chouhan Over a year ago

can you let me know i can set the background Image for my zwibbler

vipin joshi Over a year ago

@NarendraChouhan there is the property defined in Zwibbler as "backgroundImage" in Zwibbler's documentation "zwibbler.com/docs" , but if you want to set it on an action you have to do it by vanilla javascript like find the node first then style the image to width, height as '100%'

Collectives™ on Stack Overflow

Implementing 3rd party .js file in react JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related