Suggestion for forms using React-hook-form and yup for validation (beyond html validation)

[igMike-V]

Although I don't have experience using react-hook-form (have used formik) it seems like formik may no longer be maintained.

React hook forms has validation but use the browser which I think can be manipulated by an end user. I feel like we can do better with yup

I came across this article on dev.to, it explains how to set up yup and react hook form.

yup is very simple to use, here is an example of validating a new user form:

const validationSchema = yup.object().shape({ username: yup.string().required("Username is required"), password: yup.string().required("Password is required"), passwordConfirmation: yup.string() .oneOf([yup.ref('password'), null]) .required('Password confirmation is required') });

validating a number between 1 and 5:
const validationSchema = yup.object().shape({ number: yup.number() .typeError('number entry must be a number between 1 and 5') .min(1, "number must be between 1 and 5) .max(5, "number must be between 1 and 5) });

links:
Dev.to Article: https://dev.to/franciscomendes10866/react-form-validation-with-react-hook-form-and-yup-4a98
yup: https://github.com/jquense/yup
zod: https://zod.dev/
react-hook-form: https://react-hook-form.com/

[0916dhkim]

Yes, I am down for using react-hook-form. It will simplify the states & props of our form elements 👍
For validation, I think zod has better typescript integration than yup.

[igMike-V]

Im sold:
https://zod.dev/

[anjyakind]

Zod is a very nice validation package. I was thinking it will be a good idea to use it on the backend too.