Arengu React Component

ArenguForm-HOC.jsx

import React from 'react';
import PropTypes from 'prop-types';

const ARENGU_SDK_LOADED = 'af-init';

/**
 * Component to render a form from Arengu
 */
export class ArenguForm extends React.Component {

  constructor() {
    super();
    this.listener = null;
    this.container = null;
    this.boundSaveRef = this.saveReference.bind(this);
  }

  componentDidMount() {
    if (window.ArenguForms != null) {
      this.initSDK();
    } else {
      this.waitLoadEventAndInitSdk();
    }
  }

  componentWillUnmount() {
    this.removeListeners();
  }

  setHiddenFields(form) {
    const { hiddenFields } = this.props;

    if (hiddenFields == null) {
      return;
    }

    hiddenFields.forEach((o) => {
      form.setHiddenField(o.key, o.value);
    });
  }

  saveReference(ref) {
    this.container = ref;
  }

  waitLoadEventAndInitSdk() {
    this.listener = this.initSDK.bind(this);
    document.addEventListener(ARENGU_SDK_LOADED, this.listener, { once: true });
  }

  removeListeners() {
    if (this.listener != null) {
      document.removeEventListener(ARENGU_SDK_LOADED, this.listener);
    }
  }

  initSDK() {
    const { id } = this.props;

    return window.ArenguForms.embed(id, this.container)
      .then((form) => this.setHiddenFields(form));
  }

  render() {
    return (<div ref={this.boundSaveRef} />);
  }
}

ArenguForm.propTypes = {
  /** Form ID to be rendered */
  id: PropTypes.string.isRequired,
  /** Array of hidden fields to bet set */
  hiddenFields: PropTypes.arrayOf(
    PropTypes.shape({
      /** Key of your hidden field */
      key: PropTypes.string,
      /** Value of your hidden field */
      value: PropTypes.string,
    })
  ),
};

export default ArenguForm;

ArenguForm-Hooks.js

import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';

const ARENGU_SDK_LOADED = 'af-init';

/**
 * Component to render a form from Arengu
 */
export const ArenguForm = ({ id, hiddenFields }) => {
  const container = useRef();
  
  useEffect(() => {
    let listener = null;

    const initSDK = () => {
      return window.ArenguForms.embed(id, container.current)
        .then((form) => setHiddenFields(form));
    }
    
    const waitLoadEventAndInitSdk = () => {
      listener = initSDK.bind(this);
      document.addEventListener(ARENGU_SDK_LOADED, listener, { once: true });
    }

    const setHiddenFields = (form) => {
      if (hiddenFields == null) {
        return;
      }
  
      hiddenFields.forEach((o) => {
        form.setHiddenField(o.key, o.value);
      });
    }

    if (window.ArenguForms != null) {
      initSDK();
    } else {
      waitLoadEventAndInitSdk();
    }

    return () => {
      if (listener != null) {
        document.removeEventListener(ARENGU_SDK_LOADED, listener);
      }
    }
  }, [id, hiddenFields]);

  return (<div ref={container} />);
}

ArenguForm.propTypes = {
  /** Form ID to be rendered */
  id: PropTypes.string.isRequired,
  /** Array of hidden fields to bet set */
  hiddenFields: PropTypes.arrayOf(
    PropTypes.shape({
      /** Key of your hidden field */
      key: PropTypes.string,
      /** Value of your hidden field */
      value: PropTypes.string,
    })
  ),
};

export default ArenguForm;

index.jsx

import React from 'react';
import { ArenguForm } from '../PLACE_ARENGU_FORM_MODULE_ROUTE';

const IndexPage = () => (
  <div>
    <ArenguForm id="123456789" />
    <ArenguForm
      id="9876543321"
      hiddenFields={[
        {
          key: 'userId',
          value: '12345',
        },
        {
          key: 'source',
          value: 'anyString',
        },
      ]}
    />
  </div>
);

export default IndexPage;