Valya is just a tiny Higher-Order Component for validation in React that can be used as an ES7 decorator.
Install
npm i -S valya
Example
Validator
Creating ;; @ValyaComponent static displayName = 'Validator'; { if !thispropsenabled || thispropsisValid return null; return <span className="validator__error" key="error"> thispropsvalidationErrorMessage </span> ; } { return <span className="validator"> <span className="validator__target" key="target"> thispropschildren </span> this </span> ; }
Your Validator
will receive the following "special" props:
enabled
initialValidation
isValidating
isValid
validationErrorMessage
Usage
{ this;} { return <Validator value=thisstatevalue onStart= { console; } onEnd= { console; } validators= { if value return Promise; return Promise; } params: message: 'Field is required' > <div> <input type="text" value=thisstatevalue onChange=::this_onInputChange /> </div> </Validator> ;}
You can pass the following props:
enabled <boolean>
– control whether Valya should be enabled (true
by default)initialValidation <boolean>
– control whether Valya should validate first right in constructor (false
by default)silentInitValidation <boolean>
– control once validation in constructor without changing state and send result to onEnd callback (false
by default)value <any>
– current target's value to validateonStart <Function>
– "on validation start" callbackonEnd <Function>
– "on validation end" callbackvalidators <Array>
– array of "validators": everyvalidator
is just a function that must return apromise
, so Valya doesn't really cares about what is happening inside.