react-vld

4.1.4 • Public • Published

react-vld

npm

Simple and flexible validation for React 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

npm i react-vld

Usage

Example of Input component

import { Validator, ValidationError } from 'react-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 (
    <Validator rule={checkValue}>
      { ({ validate, isInvalid, validationError }) => (
        <Fragment>
          <input 
            value={value}
            onBlur={validate}
            onChange={handleChange}
          />
          { isInvalid && (
            <div>
              { validationError.message }
            </div>
          ) }
        </Fragment>
      ) }
    </Validator>
  )
}

Example of Form component (nesting)

import { Validator, ValidationError } from 'react-vld'

export default () => (
  <Validator>
    { ({ validate }) => {
      const handleSubmit = useCallback((ev) => {
        ev.preventDefault()

        if (validate().isValid) {
          alert('Submitted!')
        }
      }, [validate])

      return (
        <form onSubmit={handleSubmit}>
          <Input />
          <button type="submit" />
        </form>
      )
    } }
  </Validator>
)

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

Package Sidebar

Install

npm i react-vld

Weekly Downloads

3

Version

4.1.4

License

MIT

Unpacked Size

6.93 kB

Total Files

4

Last publish

Collaborators

  • fakundo