Form DevPack

Overview

Form 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.

Features

- 🚀 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

Installation

``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)

What's Included

Form DevPack automatically installs and configures:

- react-hook-form: For efficient form state management
- zod: For schema validation
- @hookform/resolvers: For connecting Zod with React Hook Form

$3

- 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.

Usage Example

#### 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(defaultSchema) });

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 (



control={form.control}
name="email"
label="Email"
errors={form.errors}
/>
control={form.control}
name="password"
label="Password"
type="password"
errors={form.errors}
/>
Login

);
}


``

Customization

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.

Requirements

- Node.js 18 or higher
- React or React Native project

License

ISC