el-form-react

⚡ Best React Hook Form alternative - Complete TypeScript form library with zero-boilerplate AutoForm

This is the all-in-one package that includes everything you need for modern React forms. Perfect alternative to React Hook Form + manual component building, or complex form builders like Formik.

Why developers choose el-form-react:

- ✅ Instant AutoForm generation from Zod/Yup schemas
- ✅ Better TypeScript support than React Hook Form
- ✅ Zero configuration - works out of the box
- ✅ Modern React patterns - built for React 18+

🧭 Choose the Right Package

| Package | Use When | Bundle Size | Dependencies |
| -------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------- | ------------ |
| el-form-react-hooks | You want full control over UI/styling | 11KB | None |
| el-form-react-components | You want pre-built components with Tailwind | 18KB | Tailwind CSS |
| el-form-react | You want both hooks + components ← You are here | 29KB | Tailwind CSS |
| el-form-core | Framework-agnostic validation only | 4KB | None |

> 🎯 What you get: This package combines el-form-react-hooks + el-form-react-components for maximum flexibility.

📦 Installation

``bash
npm install el-form-react


or

`bash
npm install tailwindcss
`

🎯 What's Included

- useForm - React hooks for custom UIs
- AutoForm - Pre-built form components
- TypeScript types - Full type safety
- 29KB bundle size - Complete form solution
- Tailwind styling - Beautiful default components

🚀 Quick Start

$3

`tsx
import { AutoForm } from "el-form-react";
import { z } from "zod";

const userSchema = z.object({
firstName: z.string().min(1, "First name is required"),
lastName: z.string().min(1, "Last name is required"),
email: z.string().email("Invalid email"),
age: z.number().min(18, "Must be 18 or older"),
hobbies: z.array(z.string()).optional(),
});

function App() {
return (
schema={userSchema}
onSubmit={(data) => console.log("✅ Form data:", data)}
layout="grid"
columns={2}
/>
);
}
`

$3

`tsx
import { useForm } from "el-form-react";
import { z } from "zod";

const userSchema = z.object({
name: z.string().min(1, "Name is required"),
email: z.string().email("Invalid email"),
});

function CustomForm() {
const { register, handleSubmit, formState } = useForm({
schema: userSchema,
});

return (


`tsx
const userSchema = z.object({
email: z.string().email("Please enter a valid email"),
password: z.string().min(8, "Password must be at least 8 characters"),
});

// AutoForm handles errors automatically
schema={userSchema}
onSubmit={(data) => console.log("Success:", data)}
onError={(errors) => console.log("Validation failed:", errors)}
/>;
`

$3

`tsx
const { setError, clearErrors, formState } = useForm({ schema });

// Set custom errors
setError("email", "This email is already taken");

// Clear errors
clearErrors("email"); // Clear specific field
clearErrors(); // Clear all fields

// Handle API errors
const handleSubmit = async (data) => {
try {
await api.submitForm(data);
} catch (error) {
if (error.fieldErrors) {
Object.entries(error.fieldErrors).forEach(([field, message]) => {
setError(field, message);
});
}
}
};
`

$3

`tsx
const CustomErrorComponent = ({ errors, touched }) => {
const errorEntries = Object.entries(errors).filter(
([field]) => touched[field]
);
if (errorEntries.length === 0) return null;

return (


schema={schema}
customErrorComponent={CustomErrorComponent}
onSubmit={handleSubmit}
/>;
`

$3

`tsx
const { register, watch, setError, clearErrors } = useForm({ schema });
const email = watch("email");

// Validate with external service
useEffect(() => {
if (email && z.string().email().safeParse(email).success) {
const timeoutId = setTimeout(async () => {
const exists = await checkEmailExists(email);
if (exists) {
setError("email", "Email already registered");
} else {
clearErrors("email");
}
}, 500);

return () => clearTimeout(timeoutId);
}
}, [email, setError, clearErrors]);
`

🏗️ Bundle Size Optimization

Want smaller bundles? Use these specialized packages instead:

$3

`bash
npm install el-form-react-hooks
`

`tsx
import { useForm } from "el-form-react-hooks";
// Only hooks, no UI components
`

$3

`bash
npm install el-form-react-components
`

`tsx
import { AutoForm } from "el-form-react-components";
// Includes hooks + AutoForm component
`

$3

`bash
npm install el-form-core
`

`tsx
import { validateForm } from "el-form-core";
// Pure validation logic, no React
`

📚 Complete API Reference

This package re-exports everything from:

- el-form-react-hooks - All hook functionality
- el-form-react-components - All component functionality

$3

`tsx
const {
register, // Register fields
handleSubmit, // Form submission
formState, // Form state (errors, values, etc.)
setValue, // Set field value
addArrayItem, // Add array item
removeArrayItem, // Remove array item
reset, // Reset form
} = useForm({ schema, initialValues });
`

$3

`tsx
schema={zodSchema} // Required: Zod schema
onSubmit={(data) => {}} // Required: Submit handler
fields={[...]} // Optional: Field configs
initialValues={{}} // Optional: Initial values
layout="grid" // Optional: "grid" or "flex"
columns={2} // Optional: Grid columns
componentMap={{}} // Optional: Custom components
onError={(errors) => {}} // Optional: Error handler
/>
`

🎨 Array Support

Full support for dynamic arrays:

`tsx
const schema = z.object({
hobbies: z.array(z.string()),
addresses: z.array(
z.object({
street: z.string(),
city: z.string(),
})
),
});

console.log(data)} />;
// Automatically generates Add/Remove buttons
`

🏗️ Package Structure

This is part of the el-form ecosystem:

- el-form-core - Framework-agnostic validation logic (4KB)
- el-form-react-hooks - React hooks only (11KB)
- el-form-react-components - Pre-built UI components (18KB)
- el-form-react - Everything combined (29KB) ← You are here

🧩 Need Individual Packages?

$3

`bash
npm install el-form-react-hooks
`

$3

`bash
npm install el-form-react-components
``

🔗 Links

- Documentation
- GitHub
- npm

📄 License

MIT