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.

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

Installation

1. 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

2. 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: '[email protected]' };
    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('[email protected]', 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

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

• [email protected]