Gathering detailed insights and metrics for @astral/validations-react-hook-form-resolver
Gathering detailed insights and metrics for @astral/validations-react-hook-form-resolver
Installations
npm install @astral/validations-react-hook-form-resolverDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM, UMD
Node Version
22.17.1
NPM Version
10.9.2
Releases
Unable to fetch releases
🚀 npmpackage.info for sale
Built with Next.js • Fully responsive • SEO optimized • Open source ready
Download Statistics
Total Downloads
19,044
Last Day
4
Last Week
214
Last Month
1,149
Last Year
9,715
Maintainers
2
Package Meta Information
Latest Version
4.25.0
Package Id
@astral/validations-react-hook-form-resolver@4.25.0
Unpacked Size
18.46 kB
Size
3.78 kB
File Count
26
NPM Version
10.9.2
Node Version
22.17.1
Published on
Jul 24, 2025
Total Downloads
Cumulative downloads
Total Downloads
19,044
Last Day
-94.9%
4
Compared to previous day
Last Week
-48.8%
214
Compared to previous week
Last Month
26.7%
1,149
Compared to previous month
Last Year
15.8%
9,715
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
@astral/validations-react-hook-form-resolver
Пакет позволяет произвести интеграцию @astral/validations и react-hook-form.
Installation
1npm i --save @astral/validations @astral/validations-react-hook-form-resolver react-hook-form
1yarn add @astral/validations @astral/validations-react-hook-form-resolver react-hook-form
Basic usage
Codesandbox
1import { object, string, optional } from '@astral/validations'; 2import { resolver } from '@astral/validations-react-hook-form-resolver'; 3import { useForm } from 'react-hook-form'; 4 5type Values = { 6 name: string; 7 info: { description?: string } 8}; 9 10const validationSchema = object<Values>({ 11 name: string(), 12 info: object<Values['info']>({ 13 description: optional(string()), 14 }), 15}); 16 17const Form = () => { 18 const { register, handleSubmit, formState } = useForm<Values>({ 19 resolver: resolver<Values>(validationSchema), 20 }); 21 22 return ( 23 <form onSubmit={handleSubmit(() => {})}> 24 <input {...register('name')} /> 25 {formState.errors.name && ( 26 <p>{formState.errors.name.message}</p> 27 )} 28 <input {...register('info.description')} /> 29 {formState.errors.info?.description && ( 30 <p>{formState.errors.info.description.message}</p> 31 )} 32 <button type="submit">submit</button> 33 </form> 34 ); 35};
With useFieldArray
1import { object, string, optional } from '@astral/validations'; 2import { resolver } from '@astral/validations-react-hook-form-resolver'; 3import { useForm } from 'react-hook-form'; 4 5 6type ListItemValue = { name: string }; 7type Values = { list: Array<ListItemValue> }; 8 9const validationSchema = object<Values>({ 10 list: array( 11 arrayItem( 12 object<ListItemValue>({ 13 name: string() 14 }) 15 ) 16 ), 17}); 18 19const TestForm = () => { 20 const { register, handleSubmit, formState, control } = useForm<Values>({ 21 resolver: resolver<Values>(validationSchema), 22 }); 23 const { fields } = useFieldArray<Values>({ control, name: 'list' }); 24 25 return ( 26 <form onSubmit={handleSubmit(() => {})}> 27 {fields.map((field, index) => ( 28 <div key={field.id}> 29 <input {...register(`list.${index}.name`)} /> 30 <p>{formState.errors.list?.[index]?.name?.message}</p> 31 </div> 32 ))} 33 <button type="submit">submit</button> 34 </form> 35 ); 36};
Переиспользуемый useForm
1import { ObjectGuard, object, optional, string } from '@astral/validations'; 2import { resolver } from '@astral/validations-react-hook-form-resolver'; 3import { 4 FieldValues, 5 UseFormReturn, 6 UseFormProps as UseReactHookFormProps, 7 useForm as useReactHookForm, 8} from 'react-hook-form'; 9 10type UseFormProps<TFieldValues extends FieldValues = FieldValues> = Omit< 11 UseReactHookFormProps<TFieldValues>, 12 'resolver' 13> & { 14 validationSchema?: ObjectGuard<TFieldValues, TFieldValues>; 15}; 16 17const useForm = <TFieldValues extends FieldValues = FieldValues>({ 18 validationSchema, 19 defaultValues, 20 ...params 21}: UseFormProps<TFieldValues>): UseFormReturn<TFieldValues> => 22 useReactHookForm<TFieldValues>({ 23 ...params, 24 defaultValues, 25 resolver: validationSchema && resolver(validationSchema), 26 }); 27 28type Values = { 29 name: string; 30 info: { description?: string }; 31}; 32 33const validationSchema = object<Values>({ 34 name: string(), 35 info: object<Values['info']>({ 36 description: optional(string()), 37 }), 38}); 39 40const Form = () => { 41 const { register, handleSubmit, formState } = useForm<Values>({ 42 validationSchema, 43 }); 44 45 return ( 46 <form onSubmit={handleSubmit(() => {})}> 47 <input {...register('name')} /> 48 {formState.errors.name && <p>{formState.errors.name.message}</p>} 49 <input {...register('info.description')} /> 50 {formState.errors.info?.description && ( 51 <p>{formState.errors.info.description.message}</p> 52 )} 53 <button type="submit">submit</button> 54 </form> 55 ); 56};
No vulnerabilities found.