## Overview
npm install @lucaserthal/form-devpackForm DevPack is a streamlined toolkit for setting up form handling in React and React Native projects. It provides a pre-configured setup with best practices for form validation, state management, and typed form controls.
- 🚀 Quick setup for both React and React Native projects
- 📋 Pre-configured form validation using Zod schemas
- 🔄 Controlled form components with React Hook Form
- 🧩 Type-safe form handling with TypeScript
- 🎨 Customizable input components
``bash`
npx @lucaserthal/form-devpack
Follow the interactive prompts to select:
1. Your preferred package manager (npm or yarn)
2. Your project type (React or React Native)
Form DevPack automatically installs and configures:
- react-hook-form: For efficient form state managementzod
- : For schema validation@hookform/resolvers
- : For connecting Zod with React Hook Form
- ControlledInput: A wrapper component that connects your input fields to React Hook Form
- CustomInput: A base input component that can be styled according to your needs
- Form schemas: Pre-configured form using Zod schemas and React Hook Form as 'form-hook' snippet for vscode. If youre not using vscode, you can just delete the .vscode folder.
#### Generate a form hook using 'form-hook' snippet and edit as you wish
`tsx
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
const defaultSchema = z.object({
name: z.string().min(3).max(20),
email: z.string(),
});
type DefaultSchema = z.infer
export function defaultForm() {
const {
control,
handleSubmit,
formState: { errors },
} = useForm({ resolver: zodResolver
return {
control,
handleSubmit,
errors,
};
}
`
#### Use it with ControlledInput component
`tsx
import { DefaultSchema, useDefaultForm } from '../hooks/form';
import { ControlledInput } from './shared/controlled-input.component';
export function LoginScreen() {
const form = useDefaultForm();
function onSubmit(data: DefaultSchema) {
console.log(data);
// Handle form submission
};
return (
You can easily extend the provided components and schemas to fit your project's specific needs. The toolkit is designed to be a starting point that follows best practices while remaining flexible.
- Node.js 18 or higher
- React or React Native project
ISC