React SDK Integration

Overview

The @voieform/react SDK provides custom React hooks and primitives to integrate serverless form endpoints directly into your React, Next.js, and Gatsby projects. It handles API requests, state management (loading, error, success), files, and spam prevention seamlessly.

Build with AI (React prompt)

Copy this prompt into Cursor, v0, Bolt, or ChatGPT to generate a ready-to-use React component connected to Voieform.

promptprompt

Create a responsive contact form component in React (Tailwind CSS). 
It must use the @voieform/react package to handle submissions.
Fields: name (text), email (email), message (textarea), and resume (file upload).

apiKey: "<PASTE-YOUR-FORM-API-KEY-HERE>"

React SDK Features:

Hook-Based State Management

Auto-updates loading, error, and success states for dynamic UI feedback.

ProShield Spam Guard

Submissions route through AI spam filters before reaching your inbox or webhooks.

Multipart & File Support

Upload resumes, PDFs, or images up to 50MB directly from the browser.

Next.js Friendly

Compatible with React 19, Next.js App Router (using client directives).

Installation

Install the package in your React project using your package manager of choice:

bashbash

# Install the official React SDK
npm install @voieform/react

# Or using yarn
yarn add @voieform/react

# Or using pnpm
pnpm add @voieform/react

Basic Usage

The following example shows how to use the useForm hook inside your custom contact form component:

javascriptjavascript

import React from 'react';
import { useForm } from '@voieform/react';

export default function ContactForm() {
  // Pass your Form API key from the developer dashboard
  const { submit, loading, error, success } = useForm({
    apiKey: "YOUR_FORM_API_KEY"
  });

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    
    // Submit files & text fields automatically
    const result = await submit(formData);
    if (result.status === "success") {
      alert("Form submitted successfully!");
    }
  };

  if (success) {
    return <div className="text-emerald-500 font-bold">Thank you for your submission!</div>;
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <div>
        <label className="block text-sm font-semibold">Name</label>
        <input name="name" type="text" required className="w-full border p-2 rounded" />
      </div>
      <div>
        <label className="block text-sm font-semibold">Email</label>
        <input name="email" type="email" required className="w-full border p-2 rounded" />
      </div>
      <div>
        <label className="block text-sm font-semibold">Message</label>
        <textarea name="message" required className="w-full border p-2 rounded" />
      </div>
      <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded">
        {loading ? "Sending..." : "Submit"}
      </button>
      {error && <div className="text-red-500 text-xs">{error}</div>}
    </form>
  );
}

Handling File Uploads

To handle file uploads, make sure your form inputs have the correct type attribute (type="file") and are included in the FormData payload:

javascriptjavascript

import React, { useState } from 'react';
import { useForm } from '@voieform/react';

export function JobApplicationForm() {
  const { submit, loading, error, success } = useForm({
    apiKey: "YOUR_FORM_API_KEY"
  });

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    
    // Submit handler will auto-detect multipart/form-data and handle files
    await submit(data);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <input name="fullName" placeholder="Full Name" required />
      <input name="email" type="email" placeholder="Email" required />
      
      {/* File inputs are fully supported up to 50MB per file */}
      <input name="resume" type="file" accept=".pdf,.doc,.docx" required />
      
      <button type="submit" disabled={loading}>
        {loading ? "Uploading Resume..." : "Apply Now"}
      </button>
    </form>
  );
}

Need help?

Contact Support