React/NextJS integration of WeatherWidget.io

Total
11
Shares

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).


Solution

Try the following:

  1. Place the script tag of the widget at the bottom of your HTML page.

  2. Place the a tag in a component.

  3. In the componentDidMount method of that component add the following code:

__weatherwidget_init();

Leave a Reply

Your email address will not be published. Required fields are marked *