https://github.com/panahi-projects/react-forminate
React.js + TS package that creates dynamic UI forms based on the JSON schema `npm i react-forminate`
https://github.com/panahi-projects/react-forminate
dynamic-form form-generator forms reactjs
Last synced: 9 months ago
JSON representation
React.js + TS package that creates dynamic UI forms based on the JSON schema `npm i react-forminate`
- Host: GitHub
- URL: https://github.com/panahi-projects/react-forminate
- Owner: panahi-projects
- Created: 2025-03-24T10:25:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-27T09:17:44.000Z (11 months ago)
- Last Synced: 2025-06-27T10:27:53.677Z (11 months ago)
- Topics: dynamic-form, form-generator, forms, reactjs
- Language: TypeScript
- Homepage:
- Size: 1.5 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Forminate⚡️
The most dynamic form builder for React
[](https://opensource.org/licenses/MIT)
The ultimate plug-and-play form engine for modern React apps. Build fully dynamic, schema-based forms in seconds with advanced features like conditional logic, file uploads, and real-time validation.
## Features ✨
- **Schema-Driven Forms** - JSON-powered forms with zero boilerplate
- **Real-Time Validation** - Built-in validators + custom async validation
- **Conditional Logic** - Show/hide fields based on other fields' values
- **File Handling** - Uploads with previews (Base64/Blob/File)
- **API-Driven Fields** - Dynamic options from endpoints
- **TypeScript Ready** - Full type safety
- **Performance Optimized** - Debounced updates, lazy loading
- **Accessibility** - ARIA attributes out of the box
- **Extensible** - Add custom fields and validators
- **Styling Freedom** - Tailwind, CSS modules, or inline styles
## Installation 📦
```bash
npm install react-forminate
# or
yarn add react-forminate
```
## Basic Usage 🚀
```tsx
import { DynamicForm } from "react-forminate";
const formSchema = {
formId: "userForm",
fields: [
{
fieldId: "name",
type: "text",
label: "Full Name",
required: true,
},
{
fieldId: "email",
type: "email",
label: "Email",
required: true,
validation: [{ type: "email" }],
},
{
fieldId: "subscribe",
type: "checkbox",
label: "Subscribe to newsletter",
visibility: {
dependsOn: "email",
condition: "not_empty",
},
},
],
};
export default () => (
);
```
## Advanced Features 🛠
### Conditional Fields
```tsx
{
fieldId: "company",
type: "text",
label: "Company Name",
visibility: {
dependsOn: "employmentStatus",
condition: "equals",
value: "employed"
}
}
```
### File Uploads
```tsx
{
fieldId: "avatar",
type: "file",
accept: "image/*",
storageFormat: "base64",
events: {
onCustomUpload: (files) => uploadToServer(files)
}
}
```
### API-Driven Select
```tsx
{
fieldId: "products",
type: "select",
dynamicOptions: {
endpoint: "/api/products",
transformResponse: (res) =>
res.map(product => ({ label: product.name, value: product.id }))
}
}
```
### Custom Validation
```tsx
{
fieldId: "username",
type: "text",
validation: [
{
custom: async (value) => {
const available = await checkUsernameAvailability(value);
return available;
},
message: "Username already taken"
}
]
}
```
### Auto-Scroll on Validation Errors
```tsx
{
formId: "userForm",
options: {
scrollOnErrorValidation: true, // Automatically scroll to first error field
},
fields: [
// ... your fields
]
}
```
When enabled, clicking the submit button on an invalid form will automatically scroll to the first field with a validation error, providing better user experience for long forms.
## Field Types Supported 🏗️
**Input Fields**
| Type | Description | Example Use Case |
| -------- | --------------------------- | ------------------------ |
| text | Standard text input | Names, general text |
| email | Email input with validation | User emails |
| password | Masked password input | Login forms |
| number | Numeric input | Age, quantity |
| tel | Telephone number input | Phone numbers |
| url | URL input with validation | Website links |
| search | Search-style input | Search boxes |
| date | Date picker | Birthdates, appointments |
| file | File upload with previews | Avatars, documents |
**Selection Fields**
| Type | Description | Special Features |
| -------- | ------------------ | ------------------- |
| select | Dropdown select | Dynamic API options |
| radio | Radio button group | Single selection |
| checkbox | Checkbox group | Multiple selection |
**Layout & Structural Fields**
| Type | Description | Configuration Options |
| --------- | ---------------------------- | ---------------------- |
| group | Logical field grouping | Nested fields, legends |
| container | Visual wrapper (div/section) | Grid layouts, spacing |
| spacer | Vertical/horizontal spacing | Pixel-perfect gaps |
**Special Fields**
| Type | Description | Content Flexibility |
| -------- | ------------------------- | ---------------------------- |
| gridview | Data grid with pagination | API-driven tables |
| content | Custom HTML/JSX content | Terms, rich text, components |
| textarea | Multi-line text area | Long-form content |
## Hooks for Control 🎣
```tsx
import {
useFormValue,
useFormActions,
FormRegistryProvider,
} from "react-forminate";
// Get single value
const email = useFormValue("email", "formId");
// Access all form actions
const { validateForm, setValue } = useFormActions("formId");
// Wrap your app to enable multi-form control
;
```
## Why React Forminate? 💡
**✔ Productivity** - Build complex forms in minutes
**✔ Maintainability** - Schema-based = cleaner code
**✔ Consistency** - Unified validation & styling
**✔ Flexibility** - Extend with custom fields
## Documentation 📖
For complete documentation and advanced examples, visit our [documentation site](https://react-forminate.netlify.app/).