React / Next.js Integration

Use FormSync with React and Next.js using the built-in FormSyncForm and FormSyncButton components.

Install the Package

Install FormSync using your preferred package manager:

bash
1npm install formsync

You can also use pnpm, 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 now provides a React-first API using the FormSyncForm component. You no longer need to manually create an instance or use the action attribute.

You can still use the action attribute if you prefer, but it is not recommended in React.

Example

jsx
1import { FormSyncForm } from "formsync";
2import { toast } from "react-toast-msg";
3
4export default function Example() {
5    return (
6        <main>
7            <FormSyncForm
8                formId="YOUR_FORM_ID"
9                onSuccess={(res) => toast.success(res.message)}
10                onSubmitError={(err) => toast.error(err.message)}
11            >
12                <input
13                    type="text"
14                    name="name"
15                    placeholder="Name"
16                    required
17                />
18                <button type="submit">
19                    Submit
20                </button>
21            </FormSyncForm>
22        </main>
23    );
24}

Handling Form States

Success Callback

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

jsx
1onSuccess={(res) => {
2    console.log(res.message);
3}}

Error Callback

The onSubmitError prop is triggered if the submission fails.

jsx
1onSubmitError={(err) => {
2    console.error(err.message);
3}}

Both callbacks receive a structured response object from FormSync.

Loading State with FormSyncButton

If you want a built-in loading state for your submit button, use FormSyncButton.

Example

jsx
1import { FormSyncForm, FormSyncButton } from "formsync";
2
3<FormSyncForm formId="YOUR_FORM_ID">
4    <input name="name" required />
5    <input type="email" name="email" required />
6    <textarea name="message" required />
7
8    <FormSyncButton
9        loadingText="Submitting..."
10        className="bg-blue-500 text-white px-4 py-2 rounded"
11    >
12        Submit
13    </FormSyncButton>
14</FormSyncForm>

What FormSyncButton Does

• Automatically disables the button during submission
• Shows loadingText while the form is submitting
• Re-enables the button after completion

No extra state management is required.

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.