Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fakundo/react-vld
Simple and flexible validation for React and Preact components
https://github.com/fakundo/react-vld
preact react validation
Last synced: 5 days ago
JSON representation
Simple and flexible validation for React and Preact components
- Host: GitHub
- URL: https://github.com/fakundo/react-vld
- Owner: fakundo
- Created: 2016-12-22T13:32:46.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:47:15.000Z (about 2 years ago)
- Last Synced: 2024-04-14T13:11:08.196Z (10 months ago)
- Topics: preact, react, validation
- Language: JavaScript
- Homepage:
- Size: 1.86 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-vld / preact-vld
[](https://www.npmjs.com/package/react-vld)
Simple and flexible validation for React and Preact components.
- The main thing here is `Validator` component. Use it as a wrapper for your input components, forms, or whatever component you want to validate.
- `Validator` accepts `children` prop as a function and passes the validation state as a parameter into it.
- For updating validation state `Validator` uses a functional prop - `rule`. If a `ValidationError` was thrown within the `rule`, then validation fails, and the `Validator` updates validation state.
- By default, `Validator` is rerendered every time the validation state is updated.
- You can nest `Validator` components. The parent `Validator` fails when any of the child `Validator` fails.
### Installation
For React
```
npm i react-vld
```
For Preact
```
npm i preact-vld
```
### Usage
Example of Input component
```js
import { Validator, ValidationError } from 'react-vld' // or from 'preact-vld'
export default () => {
const [value, setValue] = useState('')
const checkValue = useCallback(() => {
if (value.trim() === '') {
throw new ValidationError('Required field')
}
}, [value])
const handleChange = useCallback((ev) => {
setValue(ev.target.value)
}, [])
return (
{ ({ validate, isInvalid, validationError }) => (
{ isInvalid && (
{ validationError.message }
) }
) }
)
}
```
Example of Form component (nesting)
```js
import { Validator, ValidationError } from 'react-vld' // or from 'preact-vld'
export default () => (
{ ({ validate }) => {
const handleSubmit = useCallback((ev) => {
ev.preventDefault()
if (validate().isValid) {
alert('Submitted!')
}
}, [validate])
return (
)
} }
)
```
### API
#### `Validator` props
- `rule()` used to calculate new validation state
- `mapError(validationError)` transforms validation error, may be useful for adding some payload to the error
- `children(validationState)`
#### `validationState` has the following structure
- `validate({ updateComponent = true } = {})` invokes validation routine (calling `rule` and also calling `validate` for every child `Validator`)
- `resetValidation({ updateComponent = true } = {})` resets validation state (also calling `resetValidation` for every child `Validator`)
- `isValid` = `true|false|undefined`
- `isInvalid` = `true|false|undefined`
- `validationError` = `ValidationError|undefined`
#### `ValidationError`
- `constructor(message, payload)`
### License
MIT