@hookform/codemod

    1.2.1 • Public • Published

    Performant, flexible and extensible forms with easy to use validation.

    npm downloads npm npm

    Goal

    Migrate your React Hook Form codebase from older version to new without the hassle by using our codemod scripts

    Usage

    npx @hookform/codemod <transform> <path> [...options]

    • transform - name of transform, see available transforms below.
    • path - files or directory to transform
    • use the --dry option for a dry-run and use --print to print the output for comparison

    This will start an interactive wizard, and then run the specified transform.

    Included transforms

    Migrate from V6 to V7

    v7/update-register

    Update the register API inside a component that use useForm of React Hook Form. This transform is not applied if the component doesn't use useForm.

    npx @hookform/codemod v7/update-register
    
    Examples
    - <input ref={register} name="example" />
    + <input {...register('example')} />
    
    - <input ref={register()} name="example" />
    + <input {...register('example')} />
    
    - <input ref={register()} name="example" />
    + <input {...register('example')} />
    
    - <input ref={register({ required: true })} name="example" />
    + <input {...register('example', { required: true })} />
    
    - <TextInput ref={register({ required: true })} name="example" />
    + <TextInput {...register('example', { required: true })} />

    With a custom register name

        function MyForm() {
          const { register: customRegister } = useForm();
    
          return (
            <form>
    -         <input ref={customRegister} name="example" />
    +         <input {...customRegister('example')} />
            </form>
          );
        }

    v7/move-errors-to-formState

    It moves errors API into formState inside a component that use useForm of React Hook Form. This transform is not applied if the component doesn't use useForm.

    npx @hookform/codemod v7/move-errors-to-formState
    
    Examples
    - const { errors } = useForm();
    + const { formState: { errors } } = useForm();
    
    - const { errors: customErrors } = useForm();
    + const { formState: { errors: customErrors } } = useForm();
    
    - const { errors, formState: { isDirty } } = useForm();
    + const { formState: { isDirty, errors } } = useForm();
    
    - const { errors: customErrors, formState: { isDirty } } = useForm();
    + const { formState: { isDirty, errors: customErrors } } = useForm();

    With a custom register name

        function MyForm() {
    -     const { errors, formState } = useForm();
    +     const { formState } = useForm();
    +     const { errors } = formState;
    
          const isDirty = formState.isDirty;
    
          return (
            //
          );
        }

    Backers

    Thanks goes to all our backers! [Become a backer].

    Organizations

    Thanks goes to these wonderful organizations! [Contribute].

    Contributors

    Thanks goes to these wonderful people! [Become a contributor].

    Keywords

    none

    Install

    npm i @hookform/codemod

    DownloadsWeekly Downloads

    142

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    24

    Last publish

    Collaborators

    • bluebill1049
    • kotarella1110
    • jorisre