https://github.com/aaronhayes/react-use-hubspot-form

Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.
https://github.com/aaronhayes/react-use-hubspot-form

form gatsby gatsbyjs hooks hubspot hubspot-form react react-components react-hooks

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/aaronhayes/react-use-hubspot-form
• Owner: aaronhayes
• License: mit
• Created: 2019-11-23T02:37:21.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T22:13:39.000Z (4 months ago)
• Last Synced: 2025-01-08T15:17:07.515Z (12 days ago)
• Topics: form, gatsby, gatsbyjs, hooks, hubspot, hubspot-form, react, react-components, react-hooks
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@aaronhayes/react-use-hubspot-form
• Size: 342 KB
• Stars: 51
• Watchers: 3
• Forks: 16
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Use HubSpot Form Embed

[![npm (scoped)](https://img.shields.io/npm/v/@aaronhayes/react-use-hubspot-form?style=flat-square)](https://www.npmjs.com/package/@aaronhayes/react-use-hubspot-form)

[![Bundle Size](https://img.shields.io/bundlephobia/min/@aaronhayes/react-use-hubspot-form?style=flat-square)](https://bundlephobia.com/result?p=@aaronhayes/react-use-hubspot-form)

![License](https://img.shields.io/npm/l/@aaronhayes/react-use-hubspot-form?style=flat-square)

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](https://js.hsforms.net/forms/v2.js) to the head of your document.

```TypeScript

import React from 'react';

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

const MyApp = () => (

    

        

    

)

```

## Usage

```TypeScript

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 (

        


            
Embed Form Below

            


        

    )

}


```

## Breaking Changes

### 2.0.0

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