feature-form

Status: Experimental

feature-form is a straightforward, typesafe, and feature-based form library.

• Lightweight & Tree Shakable: Function-based and modular design
• Fast: Optimized for speed and efficiency, ensuring smooth user experience
• Modular & Extendable: Easily extendable with features
• Typesafe: Build with TypeScript for strong type safety
• Standalone: Zero external dependencies, ensuring ease of use in various environments

📚 Examples

• ReactJs Basic (Code Sandbox)

🌟 Motivation

Create a typesafe, straightforward, and lightweight form library designed to be modular and extendable with features.

⚖️ Alternatives

• react-hook-form

📖 Usage

import { createForm } from 'feature-form';
import { useForm } from 'feature-react/form';
import * as v from 'valibot';
import { vValidator } from 'validation-adapters/valibot';
import { zValidator } from 'validation-adapters/zod';
import * as z from 'zod';

interface TFormData {
	name: string;
	email: string;
}

const $form = createForm<TFormData>({
	fields: {
		name: {
			validator: zValidator(z.string().min(2).max(10)),
			defaultValue: ''
		},
		email: {
			validator: vValidator(v.pipe(v.string(), v.email())),
			defaultValue: ''
		}
	},
	onValidSubmit: (data) => console.log('ValidSubmit', data),
	onInvalidSubmit: (errors) => console.log('InvalidSubmit', errors)
});

export const MyFormComponent: React.FC = () => {
	const { handleSubmit, register, status } = useForm($form);

	return (
		<form onSubmit={handleSubmit()}>
			<div>
				<label>Name</label>
				<input {...register('name')} />
				{status('name').error && <span>{status('name').error}</span>}
			</div>
			<div>
				<label>Email</label>
				<input {...register('email')} />
				{status('email').error && <span>{status('email').error}</span>}
			</div>
			<button type="submit">Submit</button>
		</form>
	);
};

Validators (validation-adapters)

feature-form supports various validators such as Zod, Yup, Valibot and more.

import * as v from 'valibot';
import { vValidator } from 'validation-adapters/valibot';
import { zValidator } from 'validation-adapters/zod';
import * as z from 'zod';

const zodNameValidator = zValidator(
	z
		.string()
		.min(2)
		.max(10)
		.regex(/^([^0-9]*)$/)
);

const valibotNameValidator = vValidator(
	v.pipe(v.string(), v.minLength(2), v.maxLength(10), v.regex(/^([^0-9]*)$/))
);