michael michael - 3 years ago 154
React JSX Question

Calling a Third Party Function in REACT TypeScript

I want to call WOW when a ReactJS Component has loaded

The WOW Javascript is referenced at the bottom of the HTML on the inital HTML load.

the Javascript way to initiate is

new WOW().init();


and I thought it would be good to call this on "componentDidMount()"

my component code is:

import * as React from 'react';

class Banner extends React.Component {
componentDidMount() {
new WOW().init(); //This does not work "[ts] Cannot find name "WOW"
}
shouldComponentUpdate() {
return false;
}
render() {
return (
<div className="banner-section">
<div className="an-home-img-container banner-1">
<div className="overlay"></div>
<div className="home-banner-content text-center">
<div className="container">
<h1 className="wow fadeInDown animate hidden">
Some <span>Text</span> Here
</h1>
<button className="an-btn an-btn-default btn-big wow fadeIn hidden">Expole Us</button>
</div>
</div>
</div>
</div >
)
} }

export default Banner;


How can I call a JS function that isn't imported?

Answer Source

You can declare the variable before using it:

declare var WOW: any;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}

Note that this will type WOW as any so you will lose type checking. If you need type checking you can declare WOW with a type instead of any:

interface WOW {
    init: () => void
}

interface WOWConstructor {
    new(): WOW
}

declare var WOW: WOWConstructor;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download