Skip to content

Files

Latest commit

coderaisercoderaiser
chore: @putout/plugin-react-hook-form: update fixtures
Apr 25, 2023
a9e3017 · Apr 25, 2023

History

History
This branch is 5888 commits behind coderaiser/putout:master.

plugin-react-hook-form

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
lib
lib
Apr 25, 2023
test
test
Apr 25, 2023
.eslintrc.json
.eslintrc.json
Mar 5, 2023
.madrun.mjs
.madrun.mjs
Apr 11, 2023
.npmignore
.npmignore
Jan 22, 2023
.nycrc.json
.nycrc.json
Jan 22, 2023
.putout.json
.putout.json
Apr 11, 2023
LICENSE
LICENSE
Jan 22, 2023
README.md
README.md
Apr 11, 2023
package.json
package.json
Mar 11, 2023

README.md

@putout/plugin-react-hook-form NPM version

🐊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