24 lines
853 B
TypeScript
24 lines
853 B
TypeScript
import { useEffect } from "react";
|
|
import { UseFormReturn, FieldValues, WatchObserver } from "react-hook-form";
|
|
|
|
/**
|
|
* Syncs a form field value to localStorage whenever it changes.
|
|
* @param form - A react-hook-form object with a .watch method
|
|
* @param fieldName - The name of the field to watch
|
|
* @param storageKey - The key to write to in localStorage
|
|
*/
|
|
export function useSyncFormFieldToStorage<T extends FieldValues>(
|
|
form: UseFormReturn<T>,
|
|
fieldName: keyof T & string,
|
|
storageKey: string,
|
|
) {
|
|
useEffect(() => {
|
|
const subscription = form.watch(((value, { name }) => {
|
|
if (name === fieldName && typeof value[fieldName] === "string") {
|
|
localStorage.setItem(storageKey, value[fieldName] as string);
|
|
}
|
|
}) as WatchObserver<T>);
|
|
return () => subscription.unsubscribe();
|
|
}, [form, fieldName, storageKey]);
|
|
}
|