@qazuor/react-form-toolkit v0.1.1

Qazuor React Form Toolkit

A strongly-typed React form toolkit built on top of React Hook Form with Zod validation. This library provides a simple, flexible, and type-safe way to build forms in React applications.

📋 Table of Contents

• Qazuor React Form Toolkit
  • 📋 Table of Contents
  • ✨ Features
  • 🚀 Quick Start
    • Installation
    • Basic Setup
    • Basic Example
  • 📚 Documentation
  • 📋 Project Status
    • TODO
    • In Progress
    • Done ✓
  • 📄 License

✨ Features

• 🔒 Type-safe: Built with TypeScript for complete type safety
• 🧩 Composable: Build complex forms with simple, reusable components
• 📝 Validation: Seamless integration with Zod for schema validation
• 🎨 Customizable: Easily customize styles and behavior
• 🔄 React Hook Form: Built on top of the powerful React Hook Form library
• 🧪 Well-tested: Comprehensive test suite ensures reliability

🚀 Quick Start

Installation

# npm
npm install @qazuor/react-form-toolkit react-hook-form @hookform/resolvers zod tailwindcss

# yarn
yarn add @qazuor/react-form-toolkit react-hook-form @hookform/resolvers zod tailwindcss

# pnpm
pnpm add @qazuor/react-form-toolkit react-hook-form @hookform/resolvers zod tailwindcss

Basic Setup

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../node_modules/@qazuor/react-form-toolkit/dist/index.js";

Basic Example

import { z } from 'zod';
import { FormProvider, FormField } from '@qazuor/react-form-toolkit';

// Define your form schema with Zod
const formSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Please enter a valid email address'),
});

// Infer the type from the schema
type FormValues = z.infer<typeof formSchema>;

function MyForm() {
  const handleSubmit = (data: FormValues) => {
    console.log('Form submitted:', data);
    // Handle form submission
  };

  return (
    <FormProvider
      onSubmit={handleSubmit}
      schema={formSchema}
      defaultValues={{ name: '', email: '' }}
    >
      <FormField name="name" label="Name" required>
        <input type="text" />
      </FormField>

      <FormField name="email" label="Email" required>
        <input type="email" />
      </FormField>

      <button type="submit">Submit</button>
    </FormProvider>
  );
}

📚 Documentation

• Getting Started Guide - Detailed instructions to get started
• Advanced Usage - Customization, input types, and more
• Visual Feedback - Visual enhancements, indicators, and animations
• Internationalization - i18n setup and usage
• API Reference - Complete API documentation
• Contribution Guide - How to contribute to the project

📋 Project Status

TODO

• Validation
  • Add Toast as an option to show errors
• Add more examples
• Add more testing
• Field Arrays
• Conditional Fields
• Dependants Fields
• UI
  • Add styles for non-Tailwind projects
  • Add extrahtml prop
  • Add FormLayouts feature
• Common Form implementations
  • Signin, Signup, ForgotPassword
  • Contact us
• Add form persistence feature
• Add Form generation from schema feature
• Add more internationalized texts
• Add more languages
• Create a demo website

In Progress

• UI
  • Loading button, Cancel, Reset
  • Add info tooltips
  • support components libraries (shadcn, mantine, MUI, etc)
• Validation
  • add form context global errors
  • make errors msg more flexible and configurable

Done ✓

• Add internationalization
• Extract types and interface code into several files by scope
• Validation
  • set validation mode configurable
  • async validation for FormField
  • disable complete form on validate/submit

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.