;
529 | };
530 | executeRecaptcha: θ;
531 | resetRecaptcha: θ;
532 | resize: θ;
533 | shells: number;
534 | }
535 |
536 | /* eslint-disable no-var */
537 |
538 | // Both 'hbspt' and 'hubspot' variables are globally available once script is loaded
539 | declare global {
540 | var hubspot: Hubspot;
541 | var hbspt: Hbspt;
542 | }
543 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./hubspot.types.js";
2 |
3 | export * from "./HubspotProvider.js";
4 | export * from "./useHubspot.js";
5 | export * from "./useHubspotForm.js";
6 |
--------------------------------------------------------------------------------
/src/useHubspot.ts:
--------------------------------------------------------------------------------
1 | import { useDebugValue, useMemo, useSyncExternalStore } from "react";
2 |
3 | import { HUBSPOT_LOADED_EVENT, HubspotContextProps, useHubspotContext } from "./HubspotProvider.js";
4 |
5 | import type { Hubspot, Hbspt } from "./hubspot.types.js";
6 |
7 | const subscribe = (callback: () => void) => {
8 | window.addEventListener(HUBSPOT_LOADED_EVENT, callback);
9 | return () => window.removeEventListener(HUBSPOT_LOADED_EVENT, callback);
10 | };
11 |
12 | const getHubspot = () => window.hubspot || null;
13 |
14 | const getHbspt = () => window.hbspt || null;
15 |
16 | const getServerSnapshot = () => null;
17 |
18 | export interface useHubspotResult extends HubspotContextProps {
19 | /** Global Hubspot object */
20 | readonly hubspot: Hubspot | null;
21 | /** Hbspt object, used to create forms */
22 | readonly hbspt: Hbspt | null;
23 | }
24 |
25 | /**
26 | * A custom hook that provides access to HubSpot-related data and functionality.
27 | *
28 | * This hook combines context data from `useHubspotContext` with synchronized external
29 | * store values for `hubspot` and `hbspt`.
30 | *
31 | * @returns An object containing:
32 | * - `hubspot`: Global window HubSpot object or `null` if not loaded.
33 | * - `hbspt`: Global window Hbspt object or `null` if not loaded.
34 | * - Additional context data from `useHubspotContext`.
35 | */
36 | export const useHubspot = (): useHubspotResult => {
37 | const context = useHubspotContext();
38 |
39 | const hubspot = useSyncExternalStore(subscribe, getHubspot, getServerSnapshot);
40 | const hbspt = useSyncExternalStore(subscribe, getHbspt, getServerSnapshot);
41 |
42 | useDebugValue(`hubspot: `, hubspot);
43 | useDebugValue(`hbspt: `, hbspt);
44 |
45 | const value: useHubspotResult = useMemo(
46 | () => ({
47 | ...context,
48 | hubspot,
49 | hbspt,
50 | }),
51 | [context, hubspot, hbspt],
52 | );
53 |
54 | return value;
55 | };
56 |
--------------------------------------------------------------------------------
/src/useHubspotForm.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useDebugValue, useMemo } from "react";
2 |
3 | import { useHubspot, useHubspotResult } from "./useHubspot.js";
4 |
5 | import type { HubspotFormProps } from "./hubspot.types.js";
6 |
7 | export interface UseHubSpotFormResponse extends useHubspotResult {
8 | /** If `true`, Hubspot form has been successfully created */
9 | readonly isFormCreated: boolean;
10 | /** If `true`, an error occurred while creating a Hubspot form */
11 | readonly isError: boolean;
12 | /** Error received while creating Hubspot form */
13 | readonly error: Error | null;
14 | }
15 |
16 | /**
17 | * A custom hook for integrating HubSpot forms into a React application.
18 | *
19 | * @param formProps - The properties required to create a HubSpot form.
20 | * @returns An object containing the HubSpot context, form creation status, error state, and error details.
21 | *
22 | * @description
23 | * This hook leverages the HubSpot context to dynamically create a HubSpot form using the provided `formProps`.
24 | * It manages the form creation state, error handling, and provides debug information for development purposes.
25 | *
26 | * @example
27 | * ```tsx
28 | * const formProps = {
29 | * portalId: "123456",
30 | * formId: "abcdefg",
31 | * target: "#form-container",
32 | * };
33 | *
34 | * const { isFormCreated, isError, error } = useHubspotForm(formProps);
35 | *
36 | * if (isError) {
37 | * console.error("Error creating form:", error);
38 | * }
39 | *
40 | * return (
41 | *
42 | * )
43 | * ```
44 | */
45 | export const useHubspotForm = (formProps: HubspotFormProps): UseHubSpotFormResponse => {
46 | const [isFormCreated, setIsFormCreated] = useState(false);
47 | const [error, setError] = useState(null);
48 |
49 | const isError = !!error;
50 |
51 | const hubspotContext = useHubspot();
52 |
53 | const { hbspt } = hubspotContext;
54 |
55 | useEffect(() => {
56 | const isHbsptLoaded = !!hbspt;
57 | if (!isHbsptLoaded || isFormCreated) return;
58 | try {
59 | hbspt.forms.create(formProps);
60 | setIsFormCreated(true);
61 | setError(null);
62 | } catch (e) {
63 | console.error("Failed to create hubspot form: ", e);
64 | setIsFormCreated(false);
65 | setError(e as Error);
66 | }
67 | }, [hbspt, isFormCreated, formProps]);
68 |
69 | useDebugValue(`isFormCreated: ${String(isFormCreated)}`);
70 | useDebugValue(`isError: ${String(isError)}`);
71 | useDebugValue(`error: ${error}`);
72 |
73 | const value: UseHubSpotFormResponse = useMemo(
74 | () => ({
75 | ...hubspotContext,
76 |
77 | isFormCreated: isFormCreated,
78 | isError: isError,
79 | error: error,
80 | }),
81 | [hubspotContext, isFormCreated, isError, error],
82 | );
83 |
84 | return value;
85 | };
86 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": "src",
4 | "declaration": true,
5 | "declarationDir": "lib",
6 | "module": "node16",
7 | "target": "es2020",
8 | "sourceMap": false,
9 | "jsx": "react",
10 | "moduleResolution": "node16",
11 | "esModuleInterop": true,
12 | "emitDeclarationOnly": true
13 | },
14 | "include": ["src"],
15 | "exclude": ["node_modules", "lib"]
16 | }
17 |
--------------------------------------------------------------------------------