Enform - enjoyable forms with React
source link: https://github.com/moubi/enform
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
<Enform />
helps you manage:
- form validation
- form dirty state
- form submission and reset
- field values and changes
- error messages
Forms in React are common source of frustration and code repetition. Enform moves that hassle out of the way.
:heavy_check_mark: Check the docs with live demos or jump to the.
So, handling form state?
Yes, in a beautiful way. Working with forms in React could be turned into straightforwad and enjoyable process. <Enform />
makes that possible "the React way" by providing intuitive access to the form state (field values/errors) together with a handy set of API methods to modify it.
Basic usage
import React from "react"; import Enform from "enform"; const App = () => ( <div> <h1>Simple form</h1> <Enform initial={{ name: "" }} validation={{ name: values => values.name === "" }} > {props => ( <div> <input className={props.errors.name ? "error" : ""} type="text" value={props.values.name} onChange={e => { props.onChange("name", e.target.value); }} /> <button onClick={props.onSubmit}>Submit</button> </div> )} </Enform> </div> );
View more intereactive examples here .
This :warning: note on re-rendering may save few hours of headache.
Install
yarn add enform
API
Component props
Prop Type Required Description children function yes Function that your need to wrap your DOM with. It accepts theprops
object to help with form state manipulation.
initial
object
yes
Initial form field values in a form of { fieldName: value, ... }
.
validation
object
no
Validation for the fields. It takes the form of { fieldName: function, ... }
where the function(values)
accepts all form field values and should return either an error message or truthy/falsey value. Example: { username: values => values.username === "" ? "This field is required" : false }
.
:heavy_check_mark: Read more about these props here .
State Api
Enform exposes its handy Api by passing an object
down to the function wrapper.
<Enform initial={{ name: "" }}> {props => ( <form /> ... </form> )} </Enform>
The props
object contains 2 data items:
{ fieldName: value, ... }
.
errors
Current field errors - { fieldName: errorMessage, ... }
.
and these 7 methods:
method Description onChange Updates single field's value -onChange(fieldName, value)
. The value
is usually what what comes from e.target.value
. Side effects: clears previously set field error.
onSubmit
onSubmit(successCallback)
. Usually attached to a button click or directly to <form />
onSubmit. successCallback(values)
will only be executed if all validations pass. Side effects: triggers validation or calls successCallback.
reset
Empties form elements.
isDirty
Reports if the form is dirty. It takes into account the initial
field values passed to <Enform />
.
validateField
Triggers single form field validation - validateField(fieldName)
.
clearError
Clears single form field's error - clearError(fieldName)
.
clearErrors
Clears all errors in the form.
props.values
get updated with onChange
and reset
calls.
props.errors
get updated with onChange
, onSubmit
, reset
, validateField
, clearError
and clearErrors
calls.
:heavy_check_mark: See more details about Enform's state API .
Documentation
Docs has its own home here . It further expands on the topics covered previously. Many examples and how to guides for variety of use cases take place on its pages too. Ref to this :warning: note on re-rendering for a common pitfall case.
Development
Run tests with jest
in watch mode
yarn test
or no watch
yarn test:nowatch
Get gzip size by
yarn size
Build with
yarn build
That will pipe src/Enform.js
through babel and put it as index.js
under lib/
folder.
Contributing
You are welcome to open pull requests, issues with bug reports (use codesandbox ) and suggestions or simply tweet about Enform . Contact me directly if that's preferable?
Immediate and fun contrubution:help create more usable examples. Is it a full-fetured form, third party integration or a filter form with bunch of options - feel free fork the basic form in codesandbox .
Inspiration
Enform is inspired by my experience with form refactoring, @jaredpalmer 's great work on Formik and the way @kamranahmedse 's presented driver.js .
Authors
Miroslav Nikolov ( @moubi )
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK