use-formspark
React hooks for Formspark.
Works with React and React Native.
Installation
# NPM
npm install @formspark/use-formspark
# Yarn
yarn add @formspark/use-formspark
Usage
import React, { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";
const ContactForm = () => {
const [submit, submitting] = useFormspark({
formId: "your-form-id"
});
const [message, setMessage] = useState("");
return (
<form onSubmit={async (e) => {
e.preventDefault();
await submit({ message });
}}>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button type="submit" disabled={submitting}>Send</button>
</form>
);
};
Note: don't confuse the form's action URL (e.g. https://submit-form.com/capybara) with the form ID (e.g. capybara) — this package only uses the latter.
Error handling
submit throws a FormsparkError when the server responds with a non-2xx status. The error carries the HTTP status and parsed response body.
import { useFormspark, FormsparkError } from "@formspark/use-formspark";
try {
await submit({ message });
} catch (error) {
if (error instanceof FormsparkError) {
console.error(error.status, error.body);
}
}