@putout/plugin-react-hook-form NPM

@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}
    />
);