React library for composing declarative forms in React and managing their state.
npm install 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
- ๐ฆ 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
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 <= 0 ? 0 : next;
const required: ValidatorFn
value?.trim() ? undefined : "Required";
export default function App() {
const onChange: OnChangeFormFn
const onSubmit: OnSubmitFormFn
const [status, validation] = useValidation([required]);
return (
: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 (
<>
>
);
}
`#### ๐ Step 3: Connect your components
`tsx
import { useAwesomeFormSelector } from './awesomeFormStore';export const Counter = () => {
const [counter, setCounterValue] = useAwesomeFormSelector<"counter">((state) => state.counter);
return (
{counter}
);
};
``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! ๐
- Antonio Pangallo โ @antonio_pangall

- 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
๐ Thanks for considering contributing!
Please read our CONTRIBUTING.md for guidelines.
This project is licensed under the MIT License.
See the LICENSE file for details.