plugin-react-hook-form

@putout/plugin-react-hook-form

🐊Putout plugin adds ability to migrate to latest version of React Hook Form. Not bundled.

Install

npm i putout @putout/plugin-react-hook-form -D

Add .putout.json with:

{
    "plugins": [
        "react-hook-form"
    ]
}

Rules

Here is list of rules:

{
    "rules": {
        "react-hook-form/v7-apply-form-state": "on",
        "react-hook-form/v6-apply-clear-errors": "on",
        "react-hook-form/v6-convert-as-to-render": "on",
        "react-hook-form/v6-convert-form-context-to-form-provider": "on",
        "react-hook-form/v6-convert-trigger-validation-to-trigger": "on",
        "react-hook-form/v5-remove-value-from-control": "on"
    }
}

v7-apply-form-state

errors located in formState in v7. Check out in 🐊Putout Editor.

❌ Example of incorrect code

import {useForm} from 'react-hook-form';

const {errors} = useForm();

✅ Example of correct code

import {useForm} from 'react-hook-form';

const {formState} = useForm();
const {errors} = formState;

v6-apply-clear-errors

clearError was renamed to clearErrors in v6. Check out in 🐊Putout Editor.

❌ Example of incorrect code

const {
    register,
    setError,
    clearError,
    errors,
} = useForm<{}>;

✅ Example of correct code

const {
    register,
    setError,
    clearErrors,
    errors,
} = useForm<{}>;

v6-convert-as-to-render

Control has no as, it uses render starting from v6. Check out in 🐊Putout Editor.

❌ Example of incorrect code

const a = <Controller
    as={CustomInput}
    valueName="textValue"
    onChangeName="onTextChange"
    control={control}
    name="test"
/>;

✅ Example of correct code

const a = <Controller
    render={({onChange, onBlur, value}) => <CustomInput onTextChange={onChange} onBlur={onBlur} textValue={value} />}
    control={control}
    name="test" />;

v6-convert-form-context-to-form-provider

FormContext was renamed to FormProvider starting from v6. Check out in 🐊Putout Editor.

❌ Example of incorrect code

import {FormContext} from 'react-hook-form';

export default () => <FormContext></FormContext>
;

✅ Example of correct code

import {FormProvider} from 'react-hook-form';

export default () => <FormProvider></FormProvider>
;

v6-convert-trigger-validation-to-trigger

triggerValidation was renamed no trigger, starting from v6. Check out in 🐊Putout Editor.

❌ Example of incorrect code

import {useForm} from 'react-hook-form';

const {
    register,
    triggerValidation,
    errors,
} = useForm();
triggerValidation();

✅ Example of correct code

import {useForm} from 'react-hook-form';

const {
    register,
    trigger,
    errors,
} = useForm();
trigger();

v5-remove-value-from-control

Return value of control attribute function no longer has value property in v5. Check out in 🐊Putout Editor.

❌ Example of incorrect code

import {TextInput} from 'react-native';

const a = <Controller
    as={<TextInput style={{borderWidth: 2, borderColor: 'black'}} />}
    name="text"
    control={(args) => ({
        value: args[0].nativeEvent.text,
    })}
    onChange={onChange}
/>;

✅ Example of correct code

import {TextInput} from 'react-native';

const a = <Controller
    as={<TextInput style={{borderWidth: 2, borderColor: 'black'}} />}
    name="text"
    control={(args) => args[0].nativeEvent.text}
    onChange={onChange}
/>;

License

MIT