#Formality
React forms with courtesy.
Formality aims to be a simple and composable library for validated input and forms in React. The provided input components can be used without any parent container, and can be interacted with like a standard component via onChange
.
Alternatively your inputs can be wrapped in a <Form />
component which will retrieve all data and pass it to the onSubmit
event handler- which is only fired when all input is valid (unless you pass submitOnInvalid
)!.
Validation is done by passing validation functions as children to an Input component. This method is inspired by the validation library by vacuumlabs (Video).
import { Input, isEmail } from "@thinmartian/formality";
<Input debounce={300} name="email">
<IsEmail />
</Input>
import { Input, Required } from "@thinmartian/formality";
<Input name="username">
<Required message="Please supply a username" />
</Input>
const AsyncCheck = ({ value }) => {
return new Promise(resolve => {
setTimeout(() => resolve(value === "correct"), 1000);
});
}
// Uncomment to mark validation as asynchronous
// it will be treated as async without executing the promise
// AsyncCheck.async = true;
import { Input, Required } from "@thinmartian/formality";
<Input name="server_check">
<Required />
<AsyncCheck />
</Input>
const MyCustomValidator = ({ value, is /* props */}) => {
// Can return a boolean, message will be loaded from props or parent Input
// return value === is;
return {
vaiid: value === is,
message: `Value does not equal ${is}`,
key: "equal"
}
}
// Usage
<MyCustomValidator is="matched" />
import { compose } from "@thinmartian/formality"
import isAlpha from "validator/lib/isAlpha"
const IsAlpha = compose(
isAlpha,
"Please enter an alphabetical string only",
"alpha"
)
// Usage
<IsAlpha />
Please see the examples/
directory for example usage of components