Validating React Components with Livr.js

A couple of years ago I saw an article about LIVR on Habré and since then I have been using the library on all projects. With the transition to React, I adapted it for validation because existing solutions did not offer the flexibility I wanted. I already use my solution on two projects and decided to post it in npm - maybe it will seem convenient to someone else.
The package is called react-livr-validation .

An example of basic use:

import React from 'react'; import Validation, {DisabledOnErrors, ValidationInput} from 'react-livr-validation'; const schema = { login: ['required', 'not_empty'], password: ['required', 'not_empty'] }; const data = { login: '', password: '' }; export default function() { return ( <Validation data={data} schema={schema} > <form> <ValidationInput name="login" > <input name="login" /> </ValidationInput> <ValidationInput name="password" > <input name="password" type="password" /> </ValidationInput> <DisabledOnErrors> <input type="submit" /> </DisabledOnErrors> </form> </Validation> ); } 

The component accepts the validation scheme and the original data (if the data is not valid, the submit button will immediately be inactive), you can also submit custom rules and aliased rules:

 const customRules = { alpha_chars: function() { return function(value) { if (typeof value === 'string') { if (!/[az,AZ]+/.test(value)) { return 'WRONG_FORMAT'; } } }; } }; const aliasedRules = [ { name: 'strong_password', rules: { min_length: 6 }, error: 'TOO_SHORT' } ]; <Validation data={data} schema={schema} rules={customRules} aliasedRules={aliasedRules} > // ... form </Validation> 

The wrapper ValidationInput adds its own event handlers to the input, which will be validated. The default events are change, blur, keyup.
')

 <ValidationInput name="password" valicateOnEvents={['change', 'blur', 'keyUp']} > <input name="password" type="password" /> </ValidationInput> 

It is possible to implement your own wrapper - the export package HOC, which passes api into the props

 // @flow import React, {Component} from 'react' import {ValidationComponent} from 'react-livr-validation' import get from 'lodash/get' import noop from 'lodash/noop' import compose from 'ramda/src/compose' import styled from 'styled-components' type DataChunk = { name: string, value: any } type State = { touched: boolean } type Props = { // will be passed by HOC setData: (data: DataChunk) => void, getError: (name: string) => ?string, getErrors: () => Object, className: string, // for the error block style: Object // for the error block errorCodes: Object, name: string, field: string } class NestedError extends Component { props: Props; isTouched() { const {children} = this.props; return get(children, 'props.value') } state: State = { touched: this.isTouched() } setTouched() { this.setState({ touched: true }) } cloneElement() { const {children} = this.props; const onBlur = get(children, 'props.onBlur', noop); return React.cloneElement( children, { onBlur: compose(this.setTouched, onBlur) } ) } render() { const {touched} = this.state; const { children, field, name, getError, errorCodes, style, className } = this.props; const errors = getErrors(); const error = get(errors, `${field}`.${name}); return ( <div> {touched ? children : this.cloneElement()} {error && <Error className={className} style={style} > {errorCodes[error] || error} </Error> } </div> ); } } const Error = styled.div` color: red; `; export default ValidationComponent(NestedError)