@formerie/react
Formerie for React
Send form submissions from React to Formerie, without holding recipients, templates, or provider keys in your code.
Install
These packages are in alpha, so their APIs may change.
pnpm
pnpm add @formerie/reactnpm
npm install @formerie/reactYarn
yarn add @formerie/reactBun
bun add @formerie/reactUse it
useFormerieSubmit gives a component a submit function and its state. Your JSX, your styling.
You’ll need a published form. Replace example.com and contact with your workspace and form handles from the app.
import { useFormerieSubmit } from "@formerie/react";
export function ContactForm() {
const { submit, state } = useFormerieSubmit({
workspace: "example.com",
form: "contact",
});
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
await submit({
fields: Object.fromEntries(new FormData(event.currentTarget)),
});
}
return (
<form onSubmit={onSubmit}>
<input name="email" type="email" />
<button disabled={state.status === "submitting"}>Send</button>
</form>
);
}What happens next
Formerie validates the fields on the server, checks for spam, stores the submission, and delivers it the way you configured in the app. Your code only handles the fields and the response.
Read the framework guideThe packages are in alpha, so their APIs may change. Logos and names belong to their owners. Their use only says Formerie works with these technologies, and doesn’t imply partnership or endorsement.
Create a workspace and publish your first form.
In early access. New workspaces start on the Free plan.