Skip to content

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

License

Notifications You must be signed in to change notification settings

aaronhayes/react-use-hubspot-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8002add · Sep 17, 2024

History

55 Commits
Nov 23, 2019
Feb 4, 2022
Nov 23, 2019
Nov 23, 2019
Nov 23, 2019
Nov 23, 2019
Nov 23, 2019
Feb 5, 2022
Nov 23, 2019
Sep 17, 2024
Feb 5, 2022
Nov 23, 2019
Aug 7, 2021
Nov 23, 2019
Nov 10, 2020
Mar 31, 2021

Repository files navigation

React Use HubSpot Form Embed

npm (scoped) Bundle Size License

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.