usetheform

An easy way to build forms in React.

💡 What is Usetheform?

Usetheform is a lightweight, dependency-free React library for composing declarative forms and managing their state. It's simple to use, flexible, and powerful for handling nested fields, validation, and much more.

📚 Documentation

⚡ Quickstart

🔥 Features

📖 Recipes

🧠 Motivation

🧪 Code Sandboxes

🤝 How to Contribute

📄 License

:fire: Features

- 📦 Easy integration with libraries like React Select/Material UI and React Dropzone/Material UI Dropzone
- ✅ Sync and Async validation at:
- Form level
- Field level
- Collection level
- 🔍 Schema validation with:
- Yup
- Zod
- Superstruct
- Joi
- 🧬 Follows native HTML standards — see in action
- 🧠 Reducer support at:
- Form level
- Field level
- Collection level
- 🧩 Easy handling of arrays, objects, and nested structures
- Nested collections demo
- 📦 Tiny bundle size, zero dependencies — Check it on Bundlephobia

:zap: Quickstart

Install usetheform using your preferred package manager:

``bash
npm install --save usetheform
`

`bash
yarn add usetheform
`

#### Basic usage example:

`tsx
import React from "react";
import { Form, Input, useValidation } from "usetheform";
import { ReducerFn, ValidatorFn, OnChangeFormFn, OnSubmitFormFn } from "usetheform/types";

interface MyFormState {
firstname: string;
lastname: string;
age: number;
}

const preventNegativeNumber: ReducerFn = (next) =>
next <= 0 ? 0 : next;
const required: ValidatorFn = (value) =>
value?.trim() ? undefined : "Required";

export default function App() {
const onChange: OnChangeFormFn = (formState) => console.log("ON_CHANGE:", formState);
const onSubmit: OnSubmitFormFn = (formState) => console.log("ON_SUBMIT:", formState);
const [status, validation] = useValidation([required]);

return (
onSubmit={onSubmit} onChange={onChange}>

{status.error && {status.error}}


Submit

);
}
`

:book: Recipes

$3

#### 🧱 Step 1: Create a form store

`tsx
interface FormState { counter: number; }
`

`tsx
import { createFormStore } from 'usetheform';

const [formStore, useFormSelector] = createFormStore({ counter: 0 });

export const awesomeFormStore = formStore;
export const useAwesomeFormSelector = useFormSelector;
`

#### 🧩 Step 2: Create your awesome form

`tsx
import { Form, Input } from 'usetheform';
import { awesomeFormStore } from './awesomeFormStore';


export default function AwesomeForm() {
return (
<>
formStore={awesomeFormStore}>




);
}
`

#### 🔌 Step 3: Connect your components

`tsx
import { useAwesomeFormSelector } from './awesomeFormStore';

export const Counter = () => {
const [counter, setCounterValue] = useAwesomeFormSelector<"counter">((state) => state.counter);
return (



);
};
``

:brain: Motivation

Usetheform was created to provide a highly flexible, declarative way to handle forms in React with no dependencies. It supports:

- Nested field structures
- Synchronous & asynchronous validation
- Custom input and reducer logic
- Schema-based validation
- Tiny footprint

If you find this library useful, please ⭐ the repo. It means a lot! 🙏

👤 Author

- Antonio Pangallo — @antonio_pangall

$3


Code Sandboxes

- Twitter-style Form Bar
- Shopping Cart
- Form Examples (Select, Slider, Collections)
- Various Implementations
- Wizard
- FormContext
- Material UI + React Select
- Validation (Yup, Zod, Joi, Superstruct)
- React Dropzone + Material UI

How to Contribute

🎉 Thanks for considering contributing!
Please read our CONTRIBUTING.md for guidelines.

📄 License

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