React-Hubspot

React-Hubspot is a collection of React hooks for interacting with Hubspot APIs.

Table of Contents

• Installation
• Usage
• Project Overview
• Contributing
• License
• Acknowledgements

Installation

To install React-Hubspot, use npm package manager:

npm install @digitalsurgeons/react-hubspot

This command will also install the required dependencies (react and axios) specified in package.json file.

Usage

Basic

import React from 'react';
import { useForm } from '@digitalsurgeons/react-hubspot'

function App() {
  const { data, isLoading, isError, handleSubmit } = useForm({
    portalId: '<PORTAL_ID>',
    formId: '<FORM_ID>'
  })

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="text" placeholder="email" />
    </form>
  );
}

export default App;

With Hubspot Tracking

By default, this component does not Hubspot tracking enabled. To enable Hubspot tracking, set the enableCookieTracking option to true.

const { data, isLoading, isError, handleSubmit } = useForm({
  portalId: '<PORTAL_ID>',
  formId: '<FORM_ID>',
  enableCookieTracking: true
})

Project Overview

The React-Hubspot project contains the following important subdirectories and files:

react-hubspot/
|-- .babelrc
|-- .github/
|   |-- workflows/
|       |-- main.yml
|-- README.md
|-- package.json
|-- yarn.lock
|-- src/
|   |-- index.js
|   |-- useForm.js
|-- dist/
|   |-- index.js
|   |-- useForm.js

• src/index.js - main code for the React hooks.
• src/useForm.js - useForm hook.
• .babelrc - Babel configurations for supporting ES6+.
• .github/workflows/main.yml - GitHub Action to publish NPM when tags are pushed to /main.
• package.json - project metadata and scripts.
• yarn.lock - the exact versions of the dependencies installed.

Contributing

We welcome contributions from the community. To contribute, follow these steps:

1. Fork the repository

gh repo clone digitalsurgeons/react-hubspot

2. Set up the project

yarn

3. Create a new branch using git flow

# If you haven't installed git flow, run the following command:
brew install git-flow
# If you haven't initialized git flow, run the following command:
git flow init
# Create a new branch
git flow feature start <feature-name>

4. Make your changes
5. Test your changes
6. Lint your changes

yarn lint

6. Submit a pull request

gh pr create

Contributors

• Adam Soffer (@adamsoffer)
• Digital Surgeons (@digitalsurgeons)

License

This project is licensed under the ISC license. Please see the LICENSE file for more details.

Acknowledgements

React-Hubspot uses the following libraries:

• React
• Axios