Wrap Component With Valour
wrapComponentWithValour
is a function that takes a React component and returns a component with added
client side validation using the valour library.
Props
Passing a component definition to wrapComponentWithValour
will provide additional props to the newly defined component function:
-
formName
* requiredThe name of the form that is registered with valour. If the
formName
already exists, the rules andvalueName
will be added to the current form definition within valour. -
valueName
* requiredThe name of the value being registered within the valour form
-
rules
* requiredAn object that defines the rules for a given value within a form.
-
shouldRenderValidationState
- Defaults to trueShould the component render validation state. This is useful for allowing parent components to control validation for each of it's child components.
-
onValidationStateChanged
- Defaults to noopA function that will get run after validation has been run. It takes three parameters:
valueName
,value
, andisValid
.
Usage
SimpleText.js
;; { { const newText = eventtargetvalue; ; } const labelClass = !isValid && shouldRenderAsInvalid ? 'error' : ''; return <label className=labelClass> labelText <input type="text" onChange=handleTextChanged defaultValue=value name=valueName /> </label> ;} const ValidatedText = ;
MyApp.js
;;; { const rules = firstName: valourrules ; { console; } return <ValidatedText formName="MyForm" valueName="firstName" rules=rules labelText="First Name" onValidationStateChanged=handleValidationStateChange /> ;}