React / Next.js Integration

Install the Package

Install FormSync using your preferred package manager:

Terminal
pnpm add formsync

You can also use npm, yarn, or bun.

Please Note

FormSync is currently in development. We are actively working on improving the package. If you face any issues or have feedback, please create an issue on GitHub.

Basic Usage with React / Next.js

FormSync provides a clean React Hook API using the useFormSync hook. This allows you to easily handle form submissions, loading states, and callbacks without manual state management.

Example

React Example
import { useFormSync } from "formsync";
import { toast } from "react-toast-msg";
 
export default function Example() {
    const { submit, isLoading } = useFormSync({
        formId: "YOUR_FORM_ID",
        onSuccess: (res) => toast.success(res.message),
        onError: (err) => toast.error(err.message),
    });
 
    return (
        <main>
            <form onSubmit={submit}>
                <input
                    type="text"
                    name="name"
                    placeholder="Name"
                    required
                />
                <button type="submit" disabled={isLoading}>
                    {isLoading ? "Submitting..." : "Submit"}
                </button>
            </form>
        </main>
    );
}

Handling Form States

Success Callback

The onSuccess callback is triggered when the form submission is successful.

tsx
onSuccess={(res) => {
    console.log(res.message);
}}

Error Callback

The onError callback is triggered if the submission fails.

tsx
onError={(err) => {
    console.error(err.message);
}}

Both callbacks receive a structured response object from FormSync.

useFormSync Options

Loading State

The useFormSync hook returns an isLoading boolean state. Use this to disable your submit button or show a loading spinner.

tsx
const { submit, isLoading } = useFormSync({ ... });
 
// ...
 
<button type="submit" disabled={isLoading}>
    {isLoading ? "Processing..." : "Submit"}
</button>

Spam Protection

FormSync automatically handles spam protection. There is no need to manually add honeypot fields to your form when using the useFormSync hook.

That’s It 🎉

Once your form is live:

• Submissions appear instantly in your FormSync dashboard
• No backend or API routes are needed
• Works seamlessly with React, Next.js, and static sites

You can now focus entirely on your UI while FormSync handles the rest.

Last updated on March 21, 2026