'React/NextJS integration of WeatherWidget.io

I'm trying to integrate WeatherWidget.io into a React/NextJS app.

This isn't a react component, and in order to integrate it you have to copy paste a <a> and a <script> tag.

By using the NextJS <Head> component (equivalent to ReactHelmet), it renders properly server side, however, once the first client side update is triggered, the component disappears.

I've tried using dangerouslySetInnerHTML, or manually creating a script tag in ComponentDidMount, but it didn't work.

Do you have any best practice for this scenario? I've also tried to avoid the component to re-render, but setting shouldComponentUpdate to false doesn't work either (I would have to get to Component completely out of the render tree, and it's not possible).

reactjs nextjs

Solution 1:^[1]

I managed to get the weather widget using React pure components. Try something like this.

export class WeatherWidget extends PureComponent {

render() {
    return (
        <div className={this.props.className || ""}>
            <a className="weatherwidget-io" href="https:forecast7.com/es/n24d78n65d42/salta/" data-label_1="SALTA" data-label_2="CAPITAL" data-theme="original" >SALTA CAPITAL</a>

            {!function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                // if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = 'https:weatherwidget.io/js/widget.min.js';
                    fjs.parentNode.insertBefore(js, fjs);
                // }
            }
                (document, 'script', 'weatherwidget-io-js')
            }

        </div>
    )
}};

Regards!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gonzalo Benjamin Diaz Uria

'React/NextJS integration of WeatherWidget.io

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]