@formerie/react-router

Formerie for React Router

Keep your React Router code. Formerie validates, stores, and delivers each submission.

Start free

Works with

Install

These packages are in alpha, so their APIs may change.

pnpm

Shell

pnpm add @formerie/react-router

npm

Shell

npm install @formerie/react-router

Yarn

Shell

yarn add @formerie/react-router

Bun

Shell

bun add @formerie/react-router

Use it

createFormerieReactRouterAction is a route action that works without JavaScript, and the package has FormerieForm and loadFormerie too.

You’ll need a published form. Replace fm_t77txbvg43nmar with your form's ID from the app.

TSX

import { FormerieForm, loadFormerie } from "@formerie/react-router";
import type { Route } from "./+types/contact";

export const loader = () => loadFormerie({ form: "fm_t77txbvg43nmar" });

export default function Contact({ loaderData }: Route.ComponentProps) {
  return <FormerieForm {...loaderData} />;
}

What happens next

Formerie checks the fields, runs its spam checks, saves the submission, and delivers it the way you set it up in the app. Your code only handles the fields and the response.

Read the framework guide

The packages are in alpha, so their APIs may change.

Publish your first form today.

In early access. New workspaces start on the Free plan, and listed prices aren’t charged.

Start free See the plans