Headway react component

HeadwayWidget.jsx

/* global Headway */
import React, { memo } from 'react';

const HW_CONFIG_ACCOUNT = 'your-id-here'; // get this from env-variables
const ELEMENT_ID = 'headway-updates-widget';

function HeadwayWidget() {
  // No need to render if no account is configured
  if (!HW_CONFIG_ACCOUNT) {
    return null;
  }

  // Use a function ref to determine if the DOM is ready for init
  const initWidget = element => {
    if (element) {
      Headway.init({
        selector: `#${ELEMENT_ID}`,
        account: HW_CONFIG_ACCOUNT,
      });
    }
  };

  return <div id={ELEMENT_ID} ref={initWidget} />;
}

// prevent too much re-rendering with memo
export default memo(HeadwayWidget);

somewhere.html

<!-- Put this somewhere in your document to load the widget script, make sure it is loade before react kicks in. -->
<script src="//cdn.headwayapp.co/widget.js" />

Just a head up for anyone looking for this. The official react widget hasn't been updated in a while and only works with react 16. @robbeman I haven't tried it yet but your solution still seems to be the viable one. I'll try and implement this.

import React, { useEffect } from 'react';

const HeadwayWidget = () => {
  useEffect(() => {
    let script;
    const config = {
      account: process.env.HEADWAY_APP_ID,
      selector: '#headway_badge',
    };

    if (document) {
      script = document.createElement('script');
      script.async = true;
      script.src = 'https://cdn.headwayapp.co/widget.js';
      document.head.appendChild(script);

      script.onload = function () {
        window.Headway.init(config);
      };
    }
  }, []);

  return <div id="headway_badge"></div>;
};

export default HeadwayWidget;