Easy to use validation editor.
$ npm install react-validation-builder
$ yarn add react-validation-builder
icons work with fontAwesome
import React, { useState } from 'react';
import { ValidationBuilderEditor } from 'react-validation-builder';
const config = {
addField: { icon: "fas fa-plus", text: " Add" },
removeField: { icon: "fas fa-times" },
message: { icon: "fas fa-comment", styles: { color: "black" } },
removeTag: { icon: "fas fa-times" },
valueStringTag: { icon: "fas fa-cog" },
valueDateTag: { icon: "fas fa-calendar" },
}
const pillStyles = {
pillType: {backgroundColor: "green", color: "white"},
pillTag: {backgroundColor: "blue", color: "white"}
}
const schema = {
person: {
"type": "string",
"required": {
"message": "required field"
},
"min": {
"limit": 2,
"message": "min 2"
},
"fieldKey": "person",
"max": {
"message": "max 30",
"limit": 30
},
"email": {
"message": "Error: Wrong email"
}
}
};
const App = () => {
const [schema, setSchema] = useState({...schema});
const onChange = useCallback((val) => {
setschema(val);
}, []);
return <ValidationBuilderEditor data={schema} onChange={onChange} config={config} pillStyles={pillStyles}/>
}
import { transformSchemaToYup } from 'react-validation-builder';
const schemaYup = transformSchemaToYup(schema);
import { transformSchemaToYup } from 'react-validation-builder';
const resolveValue = (fieldKey, fieldValue, expression) => {
// return a true if passed else return a false
}
const schemaYup = transformSchemaToYup(schema, resolveValue);
import { ValidationBuilderEditor } from 'react-validation-builder/lib/bootstrap';
Licensed under MIT