@aaronhayes/react-use-hubspot-form

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.

Changelog

2.1.2 (2025-07-15)

Bug Fixes

• Add return type to HubspotProvider to prevent JSX usage in build (ca6393f)