react-kay
kay's React Higher Order Components
Documentation
FormMessagesHOC
Simple wrapper over kay's error map.
Example
;; { return <ul className="errors"> messages </ul> ;} FormMessagespropTypes = messages: PropTypesarrayisRequired; FormMessages;
FormStateHOC
Provides a few utilities to properly deal with form feedback.
- shouldBeInvalid: fed with a map of errors, provides a function that returns whether or not an input should be invalid (according to its state and validation).
- shouldValidate: accepts an input's name and returns whether or not it should be validated (after the user interacted with the input or the form has been submitted).
- resetFormState: resets the form state.
Example
;;;; const user = kay; { superprops; thisstate = name: '' email: '' ; thisonSubmit = thisonSubmit; } { epreventDefault; const errors = user; if errors$invalid return; // do something this; this; } { const errors = user; const isInvalid = thisprops; return <form onSubmit=thisonSubmit> <label htmlFor="firstname"> First name: </label> <input type="text" id="name" name="name" className= ? 'invalid' : '' onChange="e => this.setState({ name: e.target.value })" value=thisstatename /> thisprops && <FormMessages errors=errorsname /> <label htmlFor="email"> Email address: </label> <input type="email" id="email" name="email" className= ? 'invalid' : '' onChange="e => this.setState({ email: e.target.value })" value=thisstateemail /> thisprops && <FormMessages errors=errorsemail /> </form> ; } SignupFormpropTypes = shouldBeInvalid: PropTypesfuncisRequired shouldValidate: PropTypesfuncisRequired resetFormState: PropTypesfuncisRequired; SignupForm;