33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import dynamic from 'next/dynamic';
|
||
|
|
import type { Control, FieldValues } from 'react-hook-form';
|
||
|
|
|
||
|
|
// Lazy-load @hookform/devtools only when actually rendered. The
|
||
|
|
// `process.env.NODE_ENV` guard below ensures we never hit this path in
|
||
|
|
// production, so Next.js' code splitter keeps the devtools chunk out of
|
||
|
|
// the prod bundle entirely.
|
||
|
|
const DevTool = dynamic(() => import('@hookform/devtools').then((m) => ({ default: m.DevTool })), {
|
||
|
|
ssr: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Floating react-hook-form state inspector. Shows live values, errors,
|
||
|
|
* touched/dirty state. Rendered only in development.
|
||
|
|
*
|
||
|
|
* Usage in any form component:
|
||
|
|
*
|
||
|
|
* const form = useForm({ resolver: zodResolver(schema) });
|
||
|
|
* ...
|
||
|
|
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
||
|
|
* <FormDevtool control={form.control} />
|
||
|
|
* {fields}
|
||
|
|
* </form>
|
||
|
|
*/
|
||
|
|
export function FormDevtool<T extends FieldValues>({ control }: { control: Control<T> }) {
|
||
|
|
if (process.env.NODE_ENV !== 'development') return null;
|
||
|
|
// Cast: @hookform/devtools types Control as the v6 shape; ours is v7+.
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
return <DevTool control={control as any} placement="bottom-right" />;
|
||
|
|
}
|