Skip to content

Instantly share code, notes, and snippets.

@robbeman
Created April 21, 2020 18:47
Show Gist options
  • Save robbeman/9617a4ab406d7eb98d94823296deed21 to your computer and use it in GitHub Desktop.
Save robbeman/9617a4ab406d7eb98d94823296deed21 to your computer and use it in GitHub Desktop.
Headway react component
/* 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);
<!-- 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" />
@paulkulesha
Copy link

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment