0.0.1 • Published 5 years ago
formyl v0.0.1
Formyl
Formyl is a library meant to be used with React that saves the state of forms and also offers custom validation
Installation
npm install formyl
API
smartForm(object, ReactComponent)
- object has four properties. A submit handler, changeHandler, a validation method, and intial values of the form(s)
- submitHandler(values) : Handles the submit event
- changeHandler(values) : Called after onChange event is fired
- validator(values) : Validates all values of all forms and returns an object with errors
- initialValues : Plain JS object containing the name of the form(s) as a key and its initial value
- Values is an object with all the form values that the Formyl handles
- object has four properties. A submit handler, changeHandler, a validation method, and intial values of the form(s)
Usage
import {smartForm} from "formyl"
class Form extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<form onSubmit={this.props.onSubmit}>
<input
value={this.props.values.name}
name="name"
onChange={this.props.onChange}
type="text"
/>
<input
value={this.props.values.email}
name="email"
onChange={this.props.onChange}
type="text"
/>
<button type="submit">Submit</button>
</form>
<h1>{!this.props.errors.name ? "VALID" : this.props.errors.name}</h1>
<h1>
{!this.props.errors.email
? "VALID"
: this.props.errors.email.map(e => e)}
</h1>
</div>
);
}
}
// returns smartForm
smartForm(
{
handleSubmit: values => console.log(values),
handleChange: values => console.log(values),
validate: values => {
const errors = {};
if (values.name.length < 5) {
errors.name = "MUST BE AT LEAST 5 CHARS";
}
if (values.email.indexOf("@") === -1) {
errors.email = ["EMAIL needs @symbol"];
}
return errors;
},
initialValues: { name: "", email: "abc@yahoo.com" }
},
Form
);
Play around with the example here
https://codepen.io/anon/pen/ZwmpzN?editors=1010
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.