CODEWITHSUNDEEP
javascriptreactjsscript-tag
vipin joshi
vipin joshi

Reputation: 57

Implementing 3rd party .js file in react JS

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 being 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 like below but that doesn't work.

used in componentDidMount:

   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 liberary? or simply how do i call that script when the component loads ? i have already tried componentWill/DidMount().

Upvotes: 1

Views: 253

Answers (1)

vipin joshi
vipin joshi

Reputation: 57

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.

Upvotes: 1

Related Questions