React Integration
Learn how to integrate Static Forms with your React applications
Static Forms works seamlessly with React applications. This guide covers different approaches to handle form submissions in React, from simple HTML forms to fully controlled components with validation.
Basic HTML Form (Simplest)
The simplest approach is to use a standard HTML form. React will handle the rendering, but the form submission is handled by the browser:
Environment Variables
Store your API key in environment variables. In Create React App use REACT_APP_ prefix, in Vite use VITE_, and in Next.js use NEXT_PUBLIC_ for client-side variables.
Fetch API with State Management
For better control over the submission process and user feedback, use the Fetch API with React state:
With JSON Payload
Send form data as JSON instead of FormData for better control:
With React Hook Form
Integrate with the popular React Hook Form library for advanced validation:
Installation
Install React Hook Form with: npm install react-hook-form
With File Uploads
Handle file uploads using FormData:
File Size Limit
Maximum file size is 5MB per file. File uploads require a Pro plan.
Best Practices
Store API Keys Securely
Always use environment variables for API keys. Never commit them to version control.
Provide User Feedback
Show loading states, success messages, and error messages to keep users informed.
Handle Errors Gracefully
Always wrap fetch calls in try-catch blocks and provide helpful error messages.
Add Client-Side Validation
Validate form inputs before submission to improve user experience and reduce errors.