Initial commit

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.github/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Example Contributing Guidelines
+
+This is an example of GitHub's contributing guidelines file. Check out GitHub's [CONTRIBUTING.md help center article](https://help.github.com/articles/setting-guidelines-for-repository-contributors/) for more information.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,9 @@
+- **I'm submitting a ...**
+  [ ] bug report
+  [ ] feature request
+  [ ] question about the decisions made in the repository
+  [ ] question about how to use this project
+
+- **Summary**
+
+* **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+- **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+
+* **What is the current behavior?** (You can also link to an open issue here)
+
+- **What is the new behavior (if this is a feature change)?**
+
+* **Other information**:

.gitignore

@@ -0,0 +1,13 @@
+node_modules
+build
+test
+src/**.js
+.idea/*
+
+coverage
+.nyc_output
+*.log
+
+package-lock.json
+
+.vscode

.npmignore

@@ -0,0 +1,14 @@
+src
+test
+tsconfig.json
+tsconfig.module.json
+tslint.json
+.travis.yml
+.github
+.prettierignore
+.vscode
+build/docs
+**/*.spec.*
+coverage
+.nyc_output
+*.log

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "useTabs": false
+}

.travis.yml

@@ -0,0 +1,11 @@
+sudo: false
+language: node_js
+node_js:
+  - '10'
+  - '12'
+cache:
+  directories:
+    - '$HOME/.npm'
+after_success:
+  - npm run cov:send
+  - npm run cov:check

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Aaron Hayes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# 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)
+[![Greenkeeper badge](https://badges.greenkeeper.io/aaronhayes/react-use-hubspot-form.svg?style=flat-square)](https://greenkeeper.io/)
+
+[![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
+```
+
+## Usage
+
+```TypeScript
+import React from 'react';
+
+import useHubspotForm from '@aaronhayes/react-use-hubspot-form';
+
+const MyPage = () => {
+    const { loaded, error, formCreated } = useScrollSpy();
+
+    return (
+        <div>
+            <h1>Embed Form Below</h1>
+            <div id="my-hubspot-form" />
+        </div>
+    )
+}
+
+```

package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@aaronhayes/react-use-hubspot-form",
+  "version": "1.0.2",
+  "description": "Embed HubSpot forms into your React components using hooks! Works with Create React App, Gatsby and other platforms.",
+  "main": "build/main/index.js",
+  "typings": "build/main/index.d.ts",
+  "types": "build/main/index.d.ts",
+  "module": "build/module/index.js",
+  "repository": "https://github.com/aaronhayes/react-use-hubspot-form",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hook",
+    "hubspot",
+    "gatsby",
+    "form"
+  ],
+  "scripts": {
+    "describe": "npm-scripts-info",
+    "build": "run-s clean && run-p build:rollup",
+    "build:main": "tsc -p tsconfig.json",
+    "build:module": "tsc -p tsconfig.module.json",
+    "build:rollup": "rollup -c",
+    "fix": "run-s fix:*",
+    "fix:prettier": "prettier \"src/**/*.ts\" --write",
+    "fix:tslint": "tslint --fix --project .",
+    "test": "run-s build test:*",
+    "test:lint": "tslint --project . && prettier \"src/**/*.ts\" --list-different",
+    "watch": "run-s clean build:main && run-p \"build:main -- -w\" \"test:unit -- --watch\"",
+    "version": "standard-version",
+    "reset": "git clean -dfx && git reset --hard && yarn",
+    "clean": "trash build test",
+    "prepare-release": "run-s reset test version"
+  },
+  "scripts-info": {
+    "info": "Display information about the package scripts",
+    "build": "Clean and rebuild the project",
+    "fix": "Try to automatically fix any linting problems",
+    "test": "Lint and unit test the project",
+    "watch": "Watch and rebuild the project on save, then rerun relevant tests",
+    "cov": "Rebuild, run tests, then create and open the coverage report",
+    "version": "Bump package.json version, update CHANGELOG.md, tag release",
+    "reset": "Delete all untracked files and reset the repo to the last commit",
+    "prepare-release": "One-step: clean, build, test, and prep a release"
+  },
+  "engines": {
+    "node": ">=10.16"
+  },
+  "dependencies": {
+    "lodash.debounce": "^4.0.8"
+  },
+  "devDependencies": {
+    "@bitjson/npm-scripts-info": "^1.0.0",
+    "@bitjson/typedoc": "^0.15.0-0",
+    "@istanbuljs/nyc-config-typescript": "^0.1.3",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.3",
+    "ava": "2.4.0",
+    "codecov": "^3.5.0",
+    "cz-conventional-changelog": "^3.0.2",
+    "husky": "^3.0.9",
+    "lint-staged": "^9.4.2",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^14.1.1",
+    "open-cli": "^5.0.0",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^2.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-scroll": "^1.7.14",
+    "rollup": "^1.26.2",
+    "rollup-plugin-typescript2": "^0.25.2",
+    "standard-version": "^7.0.0",
+    "trash-cli": "^3.0.0",
+    "tslint": "^5.18.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-immutable": "^6.0.1",
+    "typescript": "^3.5.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-scroll": "^1.7.14"
+  },
+  "ava": {
+    "failFast": true,
+    "files": [
+      "build/main/**/*.spec.js"
+    ],
+    "sources": [
+      "build/main/**/*.js"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "exclude": [
+      "**/*.spec.js"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  }
+}

rollup.config.js

@@ -0,0 +1,25 @@
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs'
+    },
+    {
+      file: pkg.module,
+      format: 'es'
+    }
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {})
+  ],
+  plugins: [
+    typescript({
+      typescript: require('typescript')
+    })
+  ]
+};

src/index.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import useScript from './useScript';
+
+interface UseHubSpotFormProps {
+  portalId: string;
+  formId: string;
+  target: string;
+}
+
+interface UseHubSpotFormResponse {
+  loaded: boolean;
+  error: boolean;
+  formCreated: boolean;
+}
+
+const useHubSpotForm = ({
+  portalId,
+  formId,
+  target
+}: UseHubSpotFormProps): UseHubSpotFormResponse => {
+  const [loaded, error] = useScript('//js.hsforms.net/forms/v2.js');
+  const [formCreated, setFormCreated] = useState(false);
+
+  useEffect(() => {
+    // @ts-ignore
+    if (loaded && window.hbspt && !formCreated) {
+      // @ts-ignore
+      window.hbspt.forms.create({
+        portalId,
+        formId,
+        target
+      });
+
+      setFormCreated(true);
+    }
+  }, [loaded, formCreated, setFormCreated]);
+
+  return { loaded, formCreated, error };
+};
+
+export default useHubSpotForm;

src/useScript.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+
+// Hook
+const cachedScripts: string[] = [];
+
+function useScript(src: string) {
+  const [loaded, setLoaded] = useState();
+  const [error, setError] = useState();
+
+  // @ts-ignore 7030
+  useEffect(() => {
+    // 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);
+      setError(false);
+    } else {
+      cachedScripts.push(src);
+
+      // Create script
+      let script = document.createElement('script');
+      script.src = src;
+      script.async = true;
+
+      // Script event listener callbacks for load and error
+      const onScriptLoad = () => {
+        setLoaded(true);
+        setError(false);
+      };
+
+      const onScriptError = () => {
+        // Remove from cachedScripts we can try loading again
+        const index = cachedScripts.indexOf(src);
+        if (index >= 0) cachedScripts.splice(index, 1);
+        script.remove();
+
+        setLoaded(true);
+        setError(true);
+      };
+
+      script.addEventListener('load', onScriptLoad);
+      script.addEventListener('error', onScriptError);
+
+      // Add script to document body
+      document.body.appendChild(script);
+
+      // Remove event listeners on cleanup
+      return () => {
+        script.removeEventListener('load', onScriptLoad);
+        script.removeEventListener('error', onScriptError);
+      };
+    }
+  }, [src]); // Only re-run effect if script src changes
+
+  return [loaded, error];
+}
+
+export default useScript;