https://github.com/thihathit/react-joi
State-based joi validation react-hook
https://github.com/thihathit/react-joi
joi react react-hooks react-joi validation-hook
Last synced: 5 months ago
JSON representation
State-based joi validation react-hook
- Host: GitHub
- URL: https://github.com/thihathit/react-joi
- Owner: thihathit
- License: mit
- Created: 2021-01-14T10:39:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-16T15:54:47.000Z (over 2 years ago)
- Last Synced: 2025-04-20T17:48:35.854Z (6 months ago)
- Topics: joi, react, react-hooks, react-joi, validation-hook
- Language: JavaScript
- Homepage: https://react-joi.netlify.app
- Size: 67.4 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## About
State-based validation hook. Unlike other component/form based validations, `react-joi` allows to use native HTML elements & require no `` element to do your `submit` validation. In short, we don't mess with your DOM.
The core validator uses [Joi](https://joi.dev/) as in it's name.
## Installation
install package via [npm](https://www.npmjs.com/package/react-joi).
install [joi](https://joi.dev/).
```
yarn add react-joi
// or
npm i react-joi
```
## Usage
```jsx
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 (
Name
setExplicitField("name", true)}
/>
{state.$errors.name.map((data) => data.$message).join(",")}
Email
setExplicitField("email", true)}
/>
{state.$errors.email.map((data) => data.$message).join(",")}
Submit
{JSON.stringify(state, null, 2)}
)
}
```
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](https://www.npmjs.com/package/react-use-models).
```jsx
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 (
Name
{state.$errors.name.map((data) => data.$message).join(",")}
Email
{state.$errors.email.map((data) => data.$message).join(",")}
Submit
Models
{JSON.stringify(models, null, 2)}
Validation
{JSON.stringify(state, null, 2)}
)
}
```