https://github.com/selmasaltik/react-forms

Working with Forms & User Input /// What I learned from "React - The Complete Guide 2024 (incl. Next.js, Redux) - Academind by Maximilian Schwarzmüller"
https://github.com/selmasaltik/react-forms

form-submission formdata formdata-object forms input-validation react react-custom-hooks react-forms third-party-libraries

Last synced: 11 days ago
JSON representation

Working with Forms & User Input /// What I learned from "React - The Complete Guide 2024 (incl. Next.js, Redux) - Academind by Maximilian Schwarzmüller"

• Host: GitHub
• URL: https://github.com/selmasaltik/react-forms
• Owner: selmasaltik
• Created: 2024-10-15T22:55:46.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-16T17:10:09.000Z (3 months ago)
• Last Synced: 2024-10-18T12:08:46.130Z (3 months ago)
• Topics: form-submission, formdata, formdata-object, forms, input-validation, react, react-custom-hooks, react-forms, third-party-libraries
• Language: JavaScript
• Homepage: https://react-forms-mu-wheat.vercel.app
• Size: 131 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Working with Forms & User Input

***It’s Trickier Than It Might Seem***

- What’s **Difficult** About Forms?

- Handling **Form Submission** & **Validating** User Input

- Using **Built-in** Form Features

- Building **Custom** Solutions

**What’s So Difficult?**

**Form Submission**

- Handling submission is relatively ***easy***

- Entered values can be managed via ***state***

- Alternatively, they can be extracted via ***refs***

- Or via ***FormData*** and native browser features

**Input Validation**

- Providing a good user experience is ***tricky***

- You can ***validate*** on every ***keystroke*** → errors may be shown ***too early***

- You can ***validate*** on ***lost focus*** → errors may be shown ***too long***

- You can ***validate*** on ***form submission*** → errors may be shown ***too late***

**Using Third-Party Form Libraries**

- [React Hook Form - performant, flexible and extensible form library](https://react-hook-form.com/)

- [React Form Library | Getting Started Guide](https://surveyjs.io/form-library/documentation/get-started-react)

- [Formik](https://formik.org/)

**Resources**

- [FormData - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/FormData)

- [Using FormData Objects - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)

- [FormData](https://javascript.info/formdata)

- [Client-side form validation - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)

- [Form on React: Best Practices](https://daily.dev/blog/form-on-react-best-practices)

- [Comparing React Form Libraries: SurveyJS, Formik, React Hook Form, React Final Form And Unform — Smashing Magazine](https://www.smashingmagazine.com/2023/02/comparing-react-form-libraries/)

- [Top React Form Libraries for Efficient Form Creation](https://dev.to/femi_akinyemi/top-10-react-form-libraries-for-efficient-form-creation-hp2)

- [5 Best Libraries to Develop React.js Forms 2024](https://dev.to/ansonch/5-best-libraries-to-develop-reactjs-forms-2024-49k3)

- [8 Best React Form Libraries for Developers [2024] | Geekflare](https://geekflare.com/best-react-form-libraries/)

- [Top 5 React Form Libraries for Developers](https://www.wearedevelopers.com/magazine/react-form-libraries)

- [React Hook Form vs Formik - Comparing the most popular React form libraries | Refine](https://refine.dev/blog/react-hook-form-vs-formik/#introduction)

- [React Hook Form vs Formik - 2024 Comparision](https://www.digitalogy.co/blog/react-hook-form-vs-formik/)