8/4/2023 0 Comments React hook formReact Hooks allow pure functional components to “hook” into state and other component lifecycle methods. A hook allows you to use local state without having to write a class-based component. React Hooks were introduced in version 16.8, in 2019. You can use the service to check the validity of phone numbers, and to standardize numbers for your contact list or collect information about a number. No calls are made and no SMS messages are sent during the phone number validation process. The AbstractAPI Phone Validator API checks a phone number against a set of databases containing phone numbers from over 19 countries. How Does the AbstractAPI Phone Validator API Work? The register method takes an object of validation options that can include out-of-the-box methods like minLength and isRequired, or can be passed a custom validation function. React Hook Form registers form components to a React hook using a provided register method. It gives us a useForm hook that provides access to components and methods for form creation and validation. React Hook Form is an easy-to-use library that leverages React Hooks to build performant, scalable forms. Secondly, we need to display a loading indicator while the request is being sent to show the user that something is happening.įinally, the phone input itself could be improved using a package like react-phone-number-input, which gives us proper phone number formatting and a country code dropdown right out of the box. For starters, we’re not handling network errors or any other kind of error that might arise during the validation process. There are many ways we can improve this code. That’s all it takes to get up and running with form validation in React Hook Form. Sweet! Our request to the API went through, the API detected that the number was invalid, and we used the valid: false response to show a validation error to our user. The function you pass to onBlur receives an event object. There is an onBlur field on the options object that calls a function whenever the user navigates away from the field. Now all we need to do is plug this function into our validation rules. When we call this function and pass in a phone number, the result will be either true or false, depending on whether or not the phone number provided was valid. In our validatePhoneNumber function, we’ve parsed the JSON response and returned just the boolean value of the valid field as our response from this function. There’s lots of useful information here, but all we need is the value of the valid field. By calling the register function, we are able to assign a named value to the input (we’ve chosen phoneNumber.) This is the value that will come through as the field name in our data object inside the onSubmit function. Meanwhile, register is where we can apply validation rules. All it does console.log the data from our form (this gets passed to our function by the handler.) In real life, this would send the data to our backend. We use handleSubmit to call our own custom onSubmit function. Import = useForm() Ĭonst onSubmit = data => console.log(data) Ĭalling the useForm() hook gives us access to a register function, handleSubmit function, and our formState (which also includes our errors object.) Using hooks greatly reduces the size and complexity of form components. Forms are notoriously painful to write, simply because a form requires a lot of state management. One place where React Hooks are particularly useful is in managing the state of forms. Not only that, it reduces the risk of introducing bugs due to context and scoping errors. It improves code readability and optimization by removing a lot of the boilerplate that has to be written for class components. React Hooks allows us to write pure functional React components while also giving us the power of state and other class-based lifecycle methods. Suffice it to say, using this resulted in all kinds of scope and context problems, and meant that component methods had to be explicitly bound to the parent class using bind(), which increased code verbosity and made things pretty confusing. If you’re a Javascript developer, you’re probably already familiar with the pitfalls of the this keyword. You initialized the component’s state via a call to the constructor() and then accessed any values in the state by pulling the values out of this.state. Typically, managing local state in a React component meant that you had to write the component as a class.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |