@putout/plugin-react-hook-form
v4.0.0
Published
🐊Putout plugin adds ability to migrate to latest version of React Hook Form
Downloads
115
Maintainers
Readme
@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