\n \n ![\"React](\"https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png\"){kind=logo}
\n \n
\n \n \n \n
Performant, flexible and extensible forms with easy to use validation.
\n\n\n CodeSandbox |\n Examples |\n Docs\n
\n\n## React Hook Form Lenses\n\nReact 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.\n\n### Installation\n\n```bash\nnpm install @hookform/lenses\n```\n\n### Quickstart\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { Lens, useLens } from '@hookform/lenses';\nimport { useFieldArray } from '@hookform/lenses/rhf';\n\nfunction FormComponent() {\n const { handleSubmit, control } = useForm<{\n firstName: string;\n lastName: string;\n children: {\n name: string;\n surname: string;\n }[];\n }>({});\n\n const lens = useLens({ control });\n\n return (\n \n );\n}\n\nfunction ChildForm({ lens }: { lens: Lens<{ name: string; surname: string }[]> }) {\n const { fields, append } = useFieldArray(lens.interop());\n\n return (\n <>\n \n {lens.map(fields, (value, l) => (\n