abit-form

A lightweight React form library with TypeScript support, providing hooks for form state management and validation with both controlled and uncontrolled mode support.

Features

• 🚀 Simple form state management (both controlled and uncontrolled modes)
• 🔍 Built-in validation support (change or blur validation triggers)
• 💡 TypeScript first design with full type safety
• 🧩 Custom hook architecture with minimal re-renders
• ⚡ Optimized performance with useCallback and useMemo
• 📝 Form context support for state sharing
• 🎯 Automatic error scrolling to first invalid field
• 🔄 Easy form reset functionality
• 📦 Lightweight with zero dependencies

Installation

npm install abit-form
# or
yarn add abit-form

Basic Usage

Using the useForm hook

import { useForm } from 'abit-form';

function MyForm() {
  const { register, handleSubmit, errors } = useForm({
    initialValues: {
      email: '',
      password: '',
      rememberMe: false,
    },
    validate: (values) => {
      const errors = {};
      if (!values.email) errors.email = 'Email is required';
      if (!values.password) errors.password = 'Password is required';
      return errors;
    },
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} type="email" />
      {errors.email && <span>{errors.email}</span>}

      <input {...register('password')} type="password" />
      {errors.password && <span>{errors.password}</span>}

      <label>
        <input {...register('rememberMe')} type="checkbox" />
        Remember me
      </label>

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

Using Form Context

import { createFormContext, useForm } from 'abit-form';

const [FormProvider, useFormContext] = createFormContext();

function FormWrapper() {
  const form = useForm({
    initialValues: { username: '' },
    validate: (values) => {
      const errors = {};
      if (!values.username) errors.username = 'Username is required';
      return errors;
    },
  });

  return (
    <FormProvider value={form}>
      <NestedFormComponent />
    </FormProvider>
  );
}

function NestedFormComponent() {
  const { register, handleSubmit } = useFormContext();

  return (
    <form onSubmit={handleSubmit((values) => console.log(values))}>
      <input {...register('username')} />
      <button type="submit">Submit</button>
    </form>
  );
}

API Reference

useForm(options)

The main form hook that manages form state and validation.

Options

| Name | Type | Required | Default | Description | | ------------------- | ------------------------------------ | -------- | ---------------- | ------------------------------------------------- | | initialValues | Record<string, any> | ✅ | – | Initial values for the form fields | | mode | 'controlled' | 'uncontrolled' | ❌ | 'uncontrolled' | Form control mode | | validateInputType | 'change' | 'blur' | ❌ | 'blur' | When to trigger validation | | validate | (values) => Record<string, string> | ❌ | – | Validation function that returns an errors object |

Return Value

| Name | Type | Description | | -------------- | ------------------------- | -------------------------------------------- | | register | Function | Function to register form inputs | | handleSubmit | Function | Form submission handler | | errors | Record<string, string> | Current validation errors | | touchedItems | Record<string, boolean> | Object tracking touched fields | | getValues | Function | Function to get current form values | | reset | Function | Function to reset the form to initial values |

createFormContext()

Creates a form context provider and hook for sharing form state across components.

Return Value

| Name | Type | Description | | ---------------- | ---------- | --------------------------------------------------- | | FormProvider | React.FC | Provider component to wrap your form | | useFormContext | Function | Hook to access the shared form state inside context |

License MIT