react-validated-proxy
An approach to form validation in React that makes use of ES6 Proxy, by way of @poteto's validated-proxy
library.
react-validated-proxy
exports a single component <Validate>
, which you can use to validate changes to any object.
Install
Note: this library is in alpha and is not ready for production use.
$ npm i react-validated-proxy
Example
import Validate from 'react-validated-proxy';import isPresent hasLength from './validations'; const user = firstName: 'Billy' lastName: 'Bob' // ...; const Adult = firstName: lastName: // ...; <Validate = => model set reset isPristine hasErrors flush <form => <input ="text" = = /> <input ="text" = = /> <button ="submit" =>Save</button> <button ="button" =>Reset</button> </form> </Validate>
See the full code for this example under example/
. You can also clone this repo and run npm install && npm start
to see the example running live.
Rationale
ES6 Proxies have many cool use cases – one of which is validating changes to objects. You can modify an object as you normally would, and a Proxy
can intercept those modifications to add custom behavior.
In the case of this library, the <Validate>
component accepts a model
object, as well as a map of validations
in the format defined by validated-proxy
. <Validate>
will then wrap your model
in a Proxy, and pass the Proxy to your children
render prop. You can then interact with the Proxy as your model
, but with the added benefit of knowing when and why changes to the model
are invalid. (Specifically, you can easily retrieve error messages from the Proxy.)
react-validated-proxy
owes its existence to validated-proxy
and ember-changeset
by Lauren Tan. It's mostly an experiment in distilling ember-changeset
to its framework-agnostic core.
API
<Validate model={T} as={IValidationMap}>...</Validate>
Pass in a data model that you want to validate, as well as a validation map of validators for your data model. The validation map should be in the format expected by validated-proxy
.
const user = firstName: 'Jim' lastName: 'Bob' age: 15; const Adult = firstName: lastName: age: ; <Validate = => model set reset isPristine hasErrors flush <form>/* ... */</form> </Validate>
<Validate>
accepts a render prop as its children
, and will pass the wrapped model
(and some helper properties and functions) to the render prop:
Jason Tu · GitHub @nucleartide · Twitter @nucleartide