aaronhayes/react-use-hubspot-form

Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.

React Use HubSpot Form Embed

Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.

Install

$ npm install --save @aaronhayes/react-use-hubspot-form

$ yarn add @aaronhayes/react-use-hubspot-form

Getting Started

Wrap your application with HubspotProvider. This will add Hubspot script to the head of your document.

import React from 'react';

import { HubspotProvider } from '@aaronhayes/react-use-hubspot-form';

const MyApp = () => (
    <HubspotProvider>
        <MyPage />
    </HubspotProvider>
)

Usage

import React from 'react';

import { useHubspotForm } from '@aaronhayes/react-use-hubspot-form';

const MyPage = () => {
    const { loaded, error, formCreated } = useHubspotForm({
        portalId: 'XXXXXXX',
        formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
        target: '#my-hubspot-form'
    });

    return (
        <div>
            <h1>Embed Form Below</h1>
            <div id="my-hubspot-form"></div>
        </div>
    )
}

Breaking Changes

2.0.0

• Introduction of the HubspotProvider component. This needs to be included in your App for useHubspotForm to work.

Support

If you feel like sending some sats to [email protected] my Lightning Address it would be much appreciated.

react-use-hubspot-form's Issues

Headless UI + Nextjs + multiple forms

This might not be necessarily a problem with this library, but rather how headless UI (Tailwind's UI library) + Nextjs interact.

I wrap my entire app in HubspotProvider but the react portal created by Headless UI is outside of it. This means that if there is a form rendered within the page and then I open a new form from within a modal, it won't show.

Is there anything I can do about it?

[Bug] Form is never created

🐛 I'm submitting a Bug report

Summary

If two useHubspotForm hooks are called on the same page, the second form sometimes may never load.

Background

I'm using the useHubspotForm hook with Next.js a couple of times on the same page.
It looks like sometimes only 1 form is rendered properly, and others never load.

While inspecting React dev tools, I noticed that script is loaded and there is no error, but formCreated is set to false.

I copied the source code locally and tried to console log hook's state to debug the error:

It looks like even if loaded prop returns true, window.hbspt can still be undefined.
And when the script is actually loaded useEffect with hbspt.forms.create() does not trigger.

Cause of the bug

Here's the problematic code:

    // If cachedScripts array already includes src that means another instance ...
    // ... of this hook already loaded this script, so no need to load again.
    if (cachedScripts.includes(src)) {
      setLoaded(true);  // <-- We return true, even though script may be still loading
      setError(false);
    } else {
      cachedScripts.push(src) // <-- We push src to scripts array, even though it's not appended to the document

Possible solution

You use useScript in one place, for loading https://js.hsforms.net/forms/v2.js script. So it may have more sense to move this logic into a separate HubspotProvider component and use React context to sync loaded / error state between all Hubspot forms:

const HubspotContext = React.createContext({ loaded: false, error: false })

export const useHubspotContext = () => React.useContext(HubspotContext)

export const HubspotProvider = ({ children }) => {
  const [loaded, error] = useScript('https://js.hsforms.net/forms/v2.js')

  return <HubspotContext.Provider value={{ loaded, error }}>{children}</HubspotContext.Provider>
}

export const useHubspotForm = (props) => {
  const { loaded, error } = useHubspotContext()
  const [formCreated, setFormCreated] = useState(false)

  useEffect(() => {
    if (typeof window !== 'undefined' && window) {
      const windowWithHubspot = window
      if (loaded && windowWithHubspot.hbspt && !formCreated) {
        windowWithHubspot.hbspt.forms.create(props)
        setFormCreated(true)
      }
    }
  }, [loaded, formCreated, setFormCreated])

  return { loaded, formCreated, error }
}

Upgrade compatibility to react-^17

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

Currently the peer dependency forbis to install @aaronhayes/react-use-hubspot-form from being used in a project that is using react-17.0.2 as it seems to use react-16. Would it be possible to check compatibility with it? Would be incredibly useful, great npm package!

Allow European configuration

• I'm submitting a ...
  [ ] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

First things first, thanks for this useful package.
I was wondering if there are any plans to support the European aspects of Hubspot. More particularly, I see two obvious spots:

• in HubspotProvider being able to provide a boolean as a prop (which would default to false for backward compatibility) which, when true, would use https://js-eu1.hsforms.net/forms/v2.js instead of the current https://js.hsforms.net/forms/v2.js (line: https://github.com/aaronhayes/react-use-hubspot-form/blob/master/src/HubspotProvider.tsx#L29)
• in UseHubSpotFormProps adding an optional field region which accepts either na1 or eu1 as specified on this documentation page: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options (line: https://github.com/aaronhayes/react-use-hubspot-form/blob/master/src/index.ts#L23)

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

In the meantime, I'm using this other package to get this flexibility. However it's not an ideal solution.

Any reply is appreciated. Thank you! 🙏

Clear the form inputs after submitting

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [x] question about how to use this project

• Summary

I would like to clear the form inputs after submitting the form. Currently, the form did not clear inputs automatically after submitting. Reloading the page after submitting still shows the already filled form inputs.

React Developer Tools extension is not working correctly after update to 2.0.1

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  React Developer Tools Chrome extension shows an Unsupported React version detected error message after updating to 2.0.1 from 1.2.6
  According to this message facebook/react#17033 (comment), this can be related to external script injection introduced in 2.0.1

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Operating system: macOS Big Sur 11.5.2
Browser: Google Chrome 93.0.4577.63 (Official Build) (x86_64)
Extension: React Developer Tools 4.18.0

package.json

"engines": {
    "node": "14.17.5",
    "npm": "6.14.14"
},
"dependencies": {
    "@aaronhayes/react-use-hubspot-form": "^2.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}

Private apps?

Hey, I just received a warning from Hubspot that I need to migrate my form submissions over to Private Apps. Given that this hook relates to embedding Hubspot form, I assume that this doesn't impact us. I just want to double-check.

Bug : Window is not defined with NextJs

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Hello 👋 I'm using NextJs with SSR. I get ReferenceError: window is not defined because of the SSR.
  If you can add a check if window is defined before adding scripts it's will be great.

If my explanations are not good, feel free to ask me more detail. And sorry for my English 🇫🇷

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Throws undefined errors when using Gatsby

• I'm submitting a ...

• bug report

• feature request

• question about the decisions made in the repository

• question about how to use this project

• Summary

When using this library with GatsbyJS, depending on what's included in the page, will cause undefined errors to be thrown. The reason for this is because the library loads the script in asynchronously and because it's to the body. This is because with Gatsby, it is rendering the page server side, setting the state as loaded, then when the page is actually loaded into the browser, it is passing the "loaded" check before it's actually been loaded.

If there was an option to load this synchronously and to add the script to the head (as it supposedly should do as per comment https://github.com/aaronhayes/react-use-hubspot-form/blob/master/src/HubspotProvider.tsx#L17), then this will no longer be an issue.

A simple example to replicate this behaviour:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
  hbspt.forms.create({
    region: region,
    portalId: portalId,
    formId: formId
  });
</script>
</script>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js"></script>
</body>
</html>

process is not defined (Webpack 5 + Gatsby 3 Support)

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

Hey @aaronhayes I have really enjoyed the simplicity of the plugin so thanks for creating this.

After Gatsby conf I was naturally excited to try out the new changes so I ended up migrating to V3. I ended up encountering warnings and an error with the plugin after upgrading to gatsby ^3.0.0 and its dependencies of react and react-dom to ^17.0.1.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Warnings:

The warnings are tied to the peer dependencies of 16.8.0 react and react-dom. I imagine these should be more easily resolved by upgrading the package to react and react-dom 17+ and fixing any minor adjustments in the plugin if necessary.

The error in production and development mode:

Production:

Development:

I believe this is because Gatsby upgraded from webpack 4 to 5 and 5 has some breaking changes in regards to how it exposes these global variables.

Here is Gatsby's migration guide from v2 to v3: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/.

Here is the migration guide on webpack 4 to 5: https://webpack.js.org/migrate/5/.

Here is some Stack overflow snippets of some folks identifying the necessary changes to webpack 5 to support process/browser and the need to no longer rely on implicitly referencing process:

If I bypass process.browser instead for a conditional check like typeof window !== 'undefined' && window && window.window === window it seems to work as intended.

I hope this helps in identifying the necessary changes to the plugin to make it more resilient.

TypeError - _aaronhayes_react_use_hubspot_form__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function

• I'm submitting a ...
  [X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

Hey, thanks a lot again for making this library. I'm just in the process of integrating it, but I got an error

My component looks like this:

import React from "react";
import useHubspotForm from "@aaronhayes/react-use-hubspot-form";

const HubspotForm = ({ slice }) => {
  const { loaded, error, formCreated } = useHubspotForm({
    portalId: "XXX-XXX",
    formId: "XXXX-XXXX-XXXX-XXX",
    target: "#hubspot-form",
  });
  return (
    <section>
      <div id="hubspot-form"></div>
    </section>
  );
};
export default HubspotForm;

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

TypeError: _aaronhayes_react_use_hubspot_form__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function
    at HubspotForm (webpack-internal:///./slices/HubspotForm/index.js:23:80)
    at processChild (/Users/kris/Documents/code/freelance/miso3/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/kris/Documents/code/freelance/miso3/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/kris/Documents/code/freelance/miso3/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/kris/Documents/code/freelance/miso3/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/kris/Documents/code/freelance/miso3/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/kris/Documents/code/freelance/miso3/node_modules/next/dist/next-server/server/render.js:53:854)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
    at Function.getInitialProps (webpack-internal:///./pages/_document.tsx:27:85)
    at loadGetInitialProps (/Users/kris/Documents/code/freelance/miso3/node_modules/next/dist/next-server/lib/utils.js:5:101)
    ```

I have this library integrated in another project and there it works pretty well.

My React version of my current project is `17.0.2`.

Improved typings vs HubSpot free tier

Hey there @aaronhayes

Just to let you know, I've forked your repo to push some changes that I've made on my end while trying to integrate a HubSpot form in my React app.

Your library helped, but unfortunately, I've realized that I'm not able to customize the styling of the rendered form (the settings seem to be ignored by the HubSpot client JS script (??)).

So, just in case you can find the changes I've made here; mostly related to TypeScript typings: dsebastien@0173bf1

Cannot find module

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

Cannot find module '@aaronhayes/react-use-hubspot-form' or its corresponding type declarations.ts(2307)