Herotofu-react NPM

Getting Started

Prerequisites

Get a free form endpoint URL at https://herotofu.com. You can also use your own backend, which handles FormData or JSON POST requests.

Signup
Create the new form endpoint
Copy the full endpoint URL or just the ID part that should look like 5e3c9090-017d-11ec-bb78-dfaf038986aa

Installation

Install the NPM package

for npm:
```
npm install herotofu-react --save
```
or for yarn:
```
yarn add herotofu-react
```
or for pnpm:
```
pnpm add herotofu-react
```

Have your form endpoint URL.

Usage

useFormData()

Sends the multipart/form-data request. Can process file uploads, too.

import { useFormData } from 'herotofu-react';

function ExampleComponent() {
  const { formState, getFormSubmitHandler } = useFormData('HEROTOFU_FORM_ID_OR_URL');

  const onSubmitCallback = ({ status, data }) => {
    console.log(`The form finished submission in status: ${status} and data: ${JSON.stringify(data)}`);
  };

  return (
    <>
      {!!formState.status && <div>Current form status is: {formState.status}</div>}
      <form onSubmit={getFormSubmitHandler(onSubmitCallback)}>
        <div>
          <input type="text" name="name" placeholder="Your name" />
        </div>
        <div>
          <input type="text" name="email" placeholder="Your email" required />
        </div>
        ... the rest of the inputs ...
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

If you want to include additional data that won't be presented in the form, pass it as a second argument to the useFormData hook:

const { formState, getFormSubmitHandler } = useFormData('HEROTOFU_FORM_ID_OR_URL', {
  additionalData: 'any string or number',
});

The onSubmitCallback is optional and can be skipped:

const { formState, getFormSubmitHandler } = useFormData('HEROTOFU_FORM_ID_OR_URL');

return (
  <form onSubmit={getFormSubmitHandler()}>
  ...rest of the code

useJsonData()

Sends application/json requests even without an actual form.

import { useJsonData } from 'herotofu-react';

function ExampleComponent() {
  const { dataState, sendData } = useJsonData('HEROTOFU_FORM_ID_OR_URL');

  const onSubmitCallback = ({status, data}) => {
    console.log(`The data was sent with status: ${status} and data: ${JSON.stringify(data)}`);
  };

  const handleButtonClick = () => {
    const dataToSend = { name: 'Joe Bloggs', email: 'joe.bloggs@example.com' };
    sendData(onSubmitCallback, dataToSend);
  }

  ...

  return (
    <>
      {!!dataState && <div>Current requests status is: {dataState.status}</div>}
      <div><button onClick={handleButtonClick()}>Send JSON data</button></div>
    </>
  );
}

useSubscribeEmail()

Lightly validates the provided email and sends it to the backend.

import { useSubscribeEmail } from 'herotofu-react';

function ExampleComponent() {
  const { subscribeState, subscribe } = useSubscribeEmail('HEROTOFU_FORM_ID_OR_URL');

  const onSubmitCallback = ({ status, data }) => {
    console.log(`The user was subscribed with status: ${status} and data: ${JSON.stringify(data)}`);
  };

  const handleButtonClick = () => {
    subscribe('joe.bloggs@example.com', onSubmitCallback);
  };

  return (
    <>
      {!!subscribeState && <div>Current requests status is: {subscribeState.status}</div>}
      <div>
        <button onClick={handleButtonClick()}>Send JSON data</button>
      </div>
    </>
  );
}

For more examples, please refer to the Guides