@otitoju/formcraft-core

🚀 Lightweight, TypeScript-first form management library for React and React Native

✨ Why FormCraft?

• 🪶 Ultra Lightweight - Only ~5KB gzipped, zero dependencies
• 🔧 TypeScript First - Full type safety with excellent IntelliSense
• 🌐 Cross Platform - Works seamlessly with React and React Native
• ⚡ Performance Focused - Optimized re-renders and efficient updates
• 🎯 Developer Experience - Simple API inspired by React Hook Form
• ✅ Built-in Validation - Zod-inspired schema validation included
• 📱 Mobile Ready - Native components for React Native
• ♿ Accessible - WCAG compliant with proper ARIA attributes

🚀 Quick Start

```bash npm install @otitoju/formcraft-core

or

yarn add @otitoju/formcraft-core

or

pnpm add @otitoju/formcraft-core ```

React/Next.js Example

```tsx import { useForm, WebFormProvider, WebInput, Schema } from '@otitoju/formcraft-core'; import '@otitoju/formcraft-core/dist/web.css'; // Optional default styles

interface FormData { email: string; password: string; }

function LoginForm() { const form = useForm({ defaultValues: { email: '', password: '' }, validation: { email: Schema.email().required('Email is required'), password: Schema.string().min(8, 'At least 8 characters').required() } });

const onSubmit = (data: FormData) => { console.log('Form submitted:', data); };

return ( Sign In ); } ```

React Native Example

```tsx import { useForm, NativeFormProvider, NativeInput, Schema } from '@otitoju/formcraft-core'; import { View, Button } from 'react-native';

function ContactForm() { const form = useForm({ defaultValues: { name: '', email: '' }, validation: { name: Schema.string().required('Name is required'), email: Schema.email().required('Email is required') } });

return ( ); } ```

📚 Documentation

Core Hook

```tsx const form = useForm({ defaultValues: { name: '', email: '' }, validation: { name: Schema.string().required().min(2), email: Schema.email().required() }, mode: 'onChange' // 'onChange' | 'onBlur' | 'onSubmit' }); ```

Schema Validation

```tsx const schema = { email: Schema.email().required('Email is required'), age: Schema.number().min(18, 'Must be 18+').max(100), website: Schema.url().required(), password: Schema.string() .min(8, 'At least 8 characters') .pattern(/^(?=.[a-z])(?=.[A-Z])(?=.*\d)/, 'Must contain uppercase, lowercase, and number') .required(), terms: Schema.string().custom(value => value === true || 'You must accept the terms') }; ```

Form State

```tsx const { values, // Current form values errors, // Validation errors touched, // Fields that have been interacted with dirty, // Fields that have been modified isValid, // Overall form validity isSubmitting,// Submission state isDirty // Whether any field has been modified } = form.formState; ```

🎯 Comparison

| Feature | FormCraft | React Hook Form | Formik | |---------|-----------|-----------------|--------| | Bundle Size | ~5KB | ~25KB | ~45KB | | TypeScript | ✅ Built-in | ✅ Good | ⚠️ Basic | | React Native | ✅ Native | ❌ Manual | ❌ Manual | | Validation | ✅ Built-in | ❌ External | ❌ External | | Learning Curve | 🟢 Easy | 🟡 Medium | 🔴 Hard | | Performance | ⚡ Excellent | ⚡ Excellent | 🟡 Good |

🛠️ Advanced Usage

Conditional Fields

```tsx const showDetails = form.watch('type') !== '';

return ( {showDetails && } ); ```

Custom Validation

```tsx const validation = { username: Schema.string() .required('Username is required') .custom(async (value) => { const isAvailable = await checkAvailability(value); return isAvailable || 'Username is taken'; }) }; ```

Dynamic Forms

```tsx const [fields, setFields] = useState(['field1']);

return ( {fields.map(fieldName => ( ))} <button onClick={() => setFields(prev => [...prev, field${prev.length + 1}])}> Add Field ); ```

🎨 Styling

Web (CSS Classes)

```tsx ```

React Native (Style Objects)

```tsx <NativeInput name="email" inputStyle={{ borderColor: 'blue' }} containerStyle={{ marginBottom: 20 }} labelStyle={{ fontSize: 18 }} /> ```

🤝 Migration Guides

From React Hook Form

```tsx // React Hook Form const { register, handleSubmit, formState: { errors } } = useForm();

// FormCraft const form = useForm(); const field = form.register('email'); // Same API! ```

From Formik

```tsx // Formik <Formik initialValues={{ email: '' }} onSubmit={handleSubmit}>

// FormCraft ```

📦 What's Included

• ✅ Core form management hook
• ✅ Built-in validation with Schema builder
• ✅ Web components (Input, Select, Textarea, Checkbox)
• ✅ React Native components
• ✅ TypeScript definitions
• ✅ Default CSS styles
• ✅ Comprehensive examples

🔗 Links

• 📖 Full Documentation
• 🎮 Interactive Examples
• 🐛 Report Issues
• 💬 Discussions

📄 License

MIT © Otitoju

Made with ❤️ for the React community

⭐ Star on GitHub | 📦 View on NPM