react-joi v1.3.1

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

Functions

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>
    )
}