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" />

This is great! When you were building this, did you ever have trouble referencing the Headway.init() call? I keep getting this error:

TypeScript error in /opt/app/src/components/account/sidebar/headway-widget.tsx(15,7):
Cannot find name 'Headway'.  TS2304

    13 |   const initWidget = element => {
    14 |     if (element) {
  > 15 |       Headway.init({
       |       ^
    16 |         selector: `#${ELEMENT_ID}`,
    17 |         account: HW_CONFIG_ACCOUNT,
    18 |       });```

I'm having the same problem. 'Headway' is not defined.

@jirsbek are you using Typescript? I figured out that's what my problem was. I added //@ts-ignore to ignore it and it worked fine after that:

//@ts-ignore
Headway.init(config);

@josh-vouched Nope, but at the beginning of the component there is /* global Headway */. Anyway I've solved this by using official component https://github.com/headwayappco/widget/blob/master/packages/react-widget/src/HeadwayWidget.js

At the time I made this gist there was no official react widget, so it's probably best y'all follow @jirsbek's suggestion and use the official widget. Sorry for not replying to previous comments.

https://www.npmjs.com/package/@headwayapp/react-widget

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;