About

State-based validation hook. Unlike other component/form based validations, react-joi allows to use native HTML elements & require no <form /> element to do your submit validation. In short, we don't mess with your DOM.

The core validator uses Joi as in it's name.

Installation

install package via npm.

install joi.

yarn add react-joi

// or

npm i react-joi

Usage

import Joi from "joi"
import { useValidator } from "react-joi"

function App() {
    const { state, setData, setExplicitField, validate } = useValidator({
        initialData: {
            name: null,
            email: null,
        },
        schema: Joi.object({
            name: Joi.string().required(),
            email: Joi.string()
                .email({
                    tlds: { allow: false },
                })
                .required(),
        }),
        explicitCheck: {
            name: false,
            email: false,
        },
        validationOptions: {
            abortEarly: true,
        },
    })

    const updateName = (e) => {
        // react < v17
        e.persist()

        setData((old) => ({
            ...old,
            name: e.target.value,
        }))
    }

    const updateEmail = (e) => {
        // react < v17
        e.persist()

        setData((old) => ({
            ...old,
            email: e.target.value,
        }))
    }

    return (
        <div>
            <div>
                <label>Name</label>
                <br />
                <input
                    type="text"
                    onChange={updateName}
                    onBlur={() => setExplicitField("name", true)}
                />
                <br />
                {state.$errors.name.map((data) => data.$message).join(",")}

                <br />
                <br />

                <label>Email</label>
                <br />
                <input
                    type="text"
                    onChange={updateEmail}
                    onBlur={() => setExplicitField("email", true)}
                />
                <br />
                {state.$errors.email.map((data) => data.$message).join(",")}

                <br />
                <br />
                <br />

                <button onClick={validate}>Submit</button>
            </div>

            <br />
            <hr />
            <br />

            <code>
                <pre>{JSON.stringify(state, null, 2)}</pre>
            </code>
        </div>
    )
}

Note that the explicitCheck object is optional, and is only needed if it is desired to suppress error messages during input until the onBlur method has fired at least once. If this behavior is not required/desired, then omit it as shown in the second example.

Documentation

Type Doc: https://paka.dev/npm/react-joi/api

State

name	description
$data	Values of the instance
$dirty	Dirty state of the instance
$explicit_fields	Settings of any fields that have been explicitly set
$data_state	State of the values:$dirty means if the initial data is touched or not
$source_errors	Raw errors of the instance. This re-validates every time $data is changed regardless of $dirty is true or false
$errors	Recommended way of retrieving errors of each fields. Each fields respects global $dirty state of the instance and $data_state's $dirty states.
$all_errors	List of all errors respecting $dirty states of their own and global state.
$all_source_errors	List of all errors not respecting $dirty states of their own and global state.
$invalid	Validity of the instance respecting global $dirty.
$auto_invalid	Validity of the instance not respecting global $dirty. Recommended use case for disabled submit button
$validation_success	Positive validity of the instance respecting global $dirty.
$validated	true when validate() function has been called. Resets to false whenever $data is changed.

Functions

name	description
setData	Setting data/values, same as useState's second argument function.
setExplicitField	Modify error suppression. setExplicitField('field_name', boolean)
validate	Validate the data manually
reset	Resets all data/state to initial. Also reset errors.

Combo with react-use-models.

import React, { useEffect } from "react"

import useModels from "react-use-models"
import Joi from "joi"
import useValidator from "react-joi"

export default function App() {
    const { models, register } = useModels({
        defaultState: {
            name: "My Name",
            email: "",
        },
    })

    const { state, setData, validate } = useValidator({
        initialData: models,
        schema: Joi.object({
            name: Joi.string().required(),
            email: Joi.string()
                .email({
                    tlds: { allow: false },
                })
                .required(),
        }),
    })

    // Sync model <-> validator
    useEffect(() => {
        setData(models)
    }, [models])

    return (
        <div>
            <label>Name</label>
            <br />
            <input {...register.input({ name: "name" })} />
            <br />
            {state.$errors.name.map((data) => data.$message).join(",")}

            <br />
            <br />

            <label>Email</label>
            <br />
            <input {...register.input({ name: "email" })} />
            <br />
            {state.$errors.email.map((data) => data.$message).join(",")}

            <br />

            <button onClick={validate}>Submit</button>

            <code>
                <h2>Models</h2>
                <pre>{JSON.stringify(models, null, 2)}</pre>
            </code>

            <hr />

            <code>
                <h2>Validation</h2>
                <pre>{JSON.stringify(state, null, 2)}</pre>
            </code>
        </div>
    )
}