0.7.1 (2025-06-13)

Bug Fixes

• links in package json and readme (#22) (ba280c2)

0.7.0 (2025-06-10)

Features

• docs reference (#21) (3c00e80)

0.6.0 (2025-04-22)

Features

• Lenses refactoring (#14) (2a58f72)

0.5.0 (2025-04-06)

Features

• Remove lens from cache on control unregister (#11) (4203ead)

0.4.0 (2025-03-30)

Features

• Allow lens fields spreading in reflect callback (#12) (836fa44)

0.3.0 (2025-03-19)

Features

• Allow array reflection (#7)
• Update lenses storage (#8)
• Remove join method (#9)
• Pass array item to lens map callback (#10) (84e5a47)

0.2.0 (2025-03-05)

Features

• Fix behaviour of union type. (#3) (d5a0290)

Thanks @horita-yuya

🎊 Features

• Type-Safe Form State: Focus on specific parts of your form state with full TypeScript support and precise type inference
• Functional Lenses: Build complex form state transformations through composable lens operations
• Deep Structure Support: Handle deeply nested structures and arrays elegantly with specialized array operations
• Seamless Integration: Work smoothly with React Hook Form's Control API and existing functionality
• Optimized Performance: Each lens is cached and reused for optimal performance
• Array Handling: Specialized support for array fields with type-safe mapping
• Composable API: Build complex form state transformations through lens composition

⏰ Quickstart

import { useFieldArray, useForm } from 'react-hook-form';
import { Lens, useLens } from '@hookform/lenses';

function FormComponent() {
  const { handleSubmit, control } = useForm<{
    firstName: string;
    lastName: string;
    children: {
      name: string;
      surname: string;
    }[];
  }>({});

  const lens = useLens({ control });
  const children = lens.focus('children');
  const { fields: childrenFields } = useFieldArray(children.interop());

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <PersonForm
        lens={lens.reflect((l) => ({
          name: l.focus('firstName'),
          surname: l.focus('lastName'),
        }))}
      />

      {children.map(childrenFields, (l, key) => (
        <PersonForm key={key} lens={l} />
      ))}

      <input type="submit" />
    </form>
  );
}

function PersonForm({ lens }: { lens: Lens<{ name: string; surname: string }> }) {
  return (
    <>
      <StringInput lens={lens.focus('name')} />
      <StringInput lens={lens.focus('surname')} />
    </>
  );
}

function StringInput({ lens }: { lens: Lens<string> }) {
  return <input {...lens.interop((ctrl, name) => ctrl.register(name))} />;
}

All credits go to @aspirisen