- Notifications
You must be signed in to change notification settings - Fork52
Sophisticated HTML form management for React
License
NotificationsYou must be signed in to change notification settings
jquense/react-formal
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Better form validation and value management for React. Providesminimal wiring while also allowing for complete input flexibility.
Built onyup andreact-input-message.
npm i -S react-formal yup
(don't like the yup but like how the form works? Try:topeka)
For more complete api documentations, live examples, and getting started guide check out thedocumentation site.
react-formal uses ayup schema to update and validate form values. It treats theform like an input (representing an object) with avalue andonChange. Theform can be controlled or uncontrolled as well, just like a normal React input.
varyup=require('yup'),Form=require('react-formal')varmodelSchema=yup.object({name:yup.object({first:yup.string().required('Name is required'),last:yup.string().required('Name is required')}),dateOfBirth:yup.date().max(newDate(),'You can be born in the future!')})// ...in a componentrender(){return(<Formschema={modelSchema}value={this.state.model}onChange={model=>this.setState({ model})}><fieldset><legend>Personal Details</legend><Form.Fieldname='name.first'/><Form.Messagefor='name.first'/><Form.Fieldname='name.last'/><Form.Messagefor='name.last'/><Form.Fieldname='dateOfBirth'/><Form.Messagefor='dateOfBirth'/></fieldset><Form.Submittype='submit'>Submit</Form.Submit></Form>)}
About
Sophisticated HTML form management for React
Resources
License
Stars
Watchers
Forks
Packages0
No packages published