IN PROGRESS....
Introduction
With React simple validation
you can speed up form creation with react
and typescript.
The idea is simple. Your component wrapped in validate
HOC will receive
prop for every validated entity. That prop will have few properties (see below).
Thanks to them you will be able to display and change value of entity, validate it,
display and clear errors.
That's all. Now you should handle value and errors in your component. You can use
any components you wan't, it is up to you.
Installation
npm install --save-dev react-simple-validation
There is no need to install types, because they are provided with the package.
Example
Simple newsletter form
Below you will see how to handle simple newsletter form with rsv
. Working code here: React Simple Validation on CodeSandbox.
index.tsx
;; ; ReactDOM.render App user= note="Some note from props" agreements= /, document.getElementById"root";
App.tsx
;; // declare props which will be passed from 'validate' HOC as PropertyWithValidation ;
API
validate(options: ValidationOption[])
Higher Order Function that returns component with additional props. For every property defined in array of ValidationOptions your component will receive prop with the same name with shape described by PropertyWithValidation.
Interfaces
ValidationOption
name: string
The name of the validated property. Props with that name will be exposed on decorated component (structure of that props is described below in PropertyWithValidation).
value: string|boolean
Initial value of the property. If property is a list, then all items in the list will have that value. If not provided, then empty string will be used as default.
initialValueFromProps?: boolean | (props: any) => any
If you have to provide initial value from props (for example: from redux store), then you should specify initialValueFromProps: true
. If true
- value of prop with name specified in name
property will be used as initial value.
If function
provided, then function will be used to get value from all component props.
syncValue?: boolean | (props: any) => any
If syncValue
is set to true
, then after every update of props passed to the wrapped component the HOC will look for the the new value of the prop
with the same name as validated property and update validated property according to the new value if changed.
If syncValue
is set to function, then after every update of props passed to the wrapped component the HOC will compute new value of the property using defined function and update validated property value if computed value is different than previous result of the computation.
validators: Validator[]
Array of validators. See Validator for more details. In validation stage
every validator will be fired and if it return false
then error
will be save in errors list.
error?: string
Fallback error message. If some validator doesn't have own error message, then that message will be used.
Validator
fn: (value: any, properties: {[key: string]: SinglePropertyWithValidation}) => boolean
Function fired during the validation stage. It takes value of the validated property and all other properties and returns false
if property is invalid.
error?: string
Error that will be saved in errors list of the property passed to the decorated component, if related validator return false
.
PropertyWithValidation = SinglePropertyWithValidation | SharedValidator
SinglePropertyWithValidation
value: any
Value of the property.
errors: string[]
List of errors returned from last validation.
change: (value: any) => void
Callback for changing value of the property. You can also change value using redux or any other custom solution and pass only a value to validation. For that you have to use initialValueFromProps
option.
validate: () => boolean
Method that will fire validation of that property. Returns true
if valid.
cleanErrors: () => void
Method to clean all errors from last validation. Useful when you want to clear error state
of the form input after focus/change event.
SharedValidator
Moreover your component will receive validator
prop with following properies:
validateAll: (callback?: (ValidateAllResult) => void) => ValidateAllResult
Method to validate all properties. You can pass callback in which you will be able to read all errors from properties
and react to the result of validation.
Returns true
if all properties are valid.
errorCount: number
Total number of errors for all properties.
ValidateAllResult
isValid: boolean
errors: {[key: string]: string[]}}
TODO
- Accept error message as a function and pass props and value to it