Working with External Libraries 5 exercises

Wrapping the useForm Hook from React Hook Form

Now that we understand the basics of useForm, let's create a wrapper around it.

The idea is to create a function that takes in some default values, then passes those into the form.

The defaultValues object should be required, and work when we use the handleSubmit function.

Here's the start

Loading exercise


00:00 In this exercise, we're going to create a wrapper around useFormHook from react-hook-form. We understand the basics about this work, so now we're going to put it into practice. In this setup, what we're going to do is we're going to basically take or create a function which just takes in some default values and then passes those into this form here.

00:19 We're expecting the default values to be required, we're expecting them to be an object, and we're also kind of expecting it to work when we use this handleSubmit function. So this custom form thing, it should really have useFormRegister, handleSubmit, and getValues. This is quite a common pattern actually when you don't want to

00:38 expose all of the functions of a third-party library, you just want to expose some of them and so you can swap them out later if needed, because this sort of register function, handleSubmit, and getValues, they could be conceivably built by someone else, let's say, or by your own team.

00:53 So we're expecting then that kiov custom form, it's only exporting those functions, we're expecting that handleSubmit works this way, and we should hopefully get everything working nicely. There will be, and I did this exercise myself to try it out,

01:09 there is a horrible little paper cut here where you will need to use this little line of code somewhere in there. You will need to do an as, and we'll explore why in the solution, but yeah, the solution does contain this slightly horrible looking piece of code, but I think you've got all the information you need. Good luck.