React Hook Form Logo - React hook custom hook for form validation

Performant, flexible and extensible forms with easy to use validation.

[![npm downloads](https://img.shields.io/npm/dm/@hookform/lenses.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/lenses) [![npm](https://img.shields.io/npm/dt/@hookform/lenses.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/lenses) [![npm](https://img.shields.io/bundlephobia/minzip/@hookform/lenses?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/lenses)

CodeSandbox | Examples | Docs

## React Hook Form Lenses React Hook Form Lenses is a powerful TypeScript-first library that brings the elegance of functional lenses to React Hook Form. By providing type-safe manipulation of nested form state, it enables developers to precisely control and transform complex form data with ease. The library's composable lens operations make it simple to work with deeply nested structures while maintaining type safety, leading to more maintainable and reusable form components. ### Installation ```bash npm install @hookform/lenses ``` ### Quickstart ```tsx import { useForm } from 'react-hook-form'; import { Lens, useLens } from '@hookform/lenses'; import { useFieldArray } from '@hookform/lenses/rhf'; function FormComponent() { const { handleSubmit, control } = useForm<{ firstName: string; lastName: string; children: { name: string; surname: string; }[]; }>({}); const lens = useLens({ control }); return (
({ name: firstName, surname: lastName, }))} /> ); } function ChildForm({ lens }: { lens: Lens<{ name: string; surname: string }[]> }) { const { fields, append } = useFieldArray(lens.interop()); return ( <> {lens.map(fields, (value, l) => ( ))} ); } function PersonForm({ lens }: { lens: Lens<{ name: string; surname: string }> }) { return (
); } function StringInput({ lens }: { lens: Lens }) { return ctrl.register(name))} />; } ```