As you may know, I’m pretty excited about the new React API for Hooks (here is an introduction about them)

There are several React hooks available right now and I plan to detail in some of them, but this article is about building a custom hook only using the useState hook to validate a form data.

Here is the live example if you want to see it working now.

The idea is to create a custom hook that receives the initial data, validations, and validators. And returns a set of variables and functions as tools for forms

This is the final Hook lets see how it works and how we could use it to validate a form

The general idea here is, the hook returns an array with 2 parts of the state and 3 functions, let see one by one what will be

The form variable represents the state plus the onChange and onClick function for every part of the state. That means

if we have an initial form data like this

const formData = {

name: '',

email: '' }

the form variable returned by the hook will be

{

name: {

input: {

value: '',

onClick: onClickHandlerFunction,

onChange: onChangeHandlerFunction

},

meta: {

touched: false,

dirty: false

}

},

email: {

input: {

value: '',

onClick: onClickHandlerFunction,

onChange: onChangeHandlerFunction

},

meta: {

touched: false,

dirty: false

}

}

}

The validations hold the validations responses from valida-js

{

valid: true,

errors: {

name: [],

email: []

}

}

The other 3 functions are for

validate: validate all the formData at once

getData: returns an object with the same signature as the initial value pass to the hook

setData: set data to the form state, passing an object with the same signature as the hook initial parameter

Using the Hook

First import the hook from npm and them inside your component function.

import useValidatedForm from 'react-valida-hook'

useValidatedForm hook could be used passing at least two parameters, the first is the initial data for the form (should be complete schema of the data), and the second parameter is the array of validations rules, those validations rules will be used for valida-js.

Now knowing the return of the hook and how to initialize the hook. Let write a small form with that

The important parts here are

How we are reading if a property has errors (maybe we need a function to do this better), but let us stay with this simple logic. If the array of errors of a property is longer than 0 that means we have errors there, in another case we assume we don’t

className={ validation.errors.firstName.length > 0 ? 'validated-form__control error': 'validated-form__control'

The other important part here is

<input name='first-name' id='first-name' { ...formData.firstName.input } />

Where we split the input Object of the firstName, that means we are passing as props to the input the value, onClick handler and onChange handler. And with that, we are going to update the metadata of the property (touched, dirty), update the value of the input when the user writes in the input and update the validation about that specific property of the form. Therefore update the validation.errors.firstName in this case.

One of the wonderful thing about this is that now we can build controls components and pass the validation.property, form.property and extract the logic to put the error and classes in there.

I hope this helps you to understand a little bit more about React Hooks and how we can use it to compose functionalities within our applications.

This example only uses one of the many available hooks on React (useState), I will dig more into the other ones and how we can use them to create for example an architecture similar to redux just with Hooks.

Here is the repository with the npm package with this hook

Thanks for reading and May the force be with you.