reform-sze
v0.0.2
Published
a simple form builder for reactjs
Downloads
4
Readme
reform-sze
a simple form builder for reactjs
Install
npm install --save reform-sze
Usage
import React, { Component } from "react";
import Form from "reform-sze";
class Example extends Component {
constructor(props) {
super(props);
this.exampleForm = {
name: {
type: "textarea",
divClassName: "divclass",
wrapper: {
type: "div",
props: {
className: "wrapper-element",
style: { background: "black" }
}
},
validation: {
required: true
},
attributes: {
value: "",
placeholder: "Your name..."
}
},
email: {
type: "input",
validation: {
required: true
},
attributes: {
value: "",
name: "user_email",
type: "email",
placeholder: "Your email..."
}
},
address: {
street: {
type: "input",
validation: {
required: true
},
attributes: {
value: "",
type: "text",
placeholder: "Your street and house number..."
}
},
zipCode: {
type: "input",
validation: {
required: true,
minLength: 5,
maxLength: 5
},
attributes: {
value: "",
type: "text",
placeholder: "Your zip code..."
}
}
},
submit: {
label: "Submit",
showLabel: false,
type: "button",
attributes: {
className: "btn btn-success"
}
}
};
this.exampleForm.name.attributes.onKeyPress = this.userInputKeyPress;
this.formRef = React.createRef();
}
userInputKeyPress = e => {
console.log("key press", e.key);
};
submitFormHandler = event => {
event.preventDefault();
const validation = this.formRef.current.validate();
if (validation.allValid === false) {
console.log(validation.invalid);
return;
} else alert("all validated");
};
render() {
return (
<Form
ref={this.formRef}
elements={this.exampleForm}
actions={{
onSubmit: e => this.submitFormHandler(e)
}}
/>
);
}
}