<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.
So, another form component?
Many form libraries are after wide range of use cases. As a result they grow in size bigger than the few form components one may ever need to handle. Enform is built for most common use cases without going to the edge. Thanks to that it remains small, but very powerful.
import React from "react";import Enform from "enform";const App =<div><h1>Simple form</h1><Enform==><div><input=="text"==/><button =>Submit</button></div></Enform></div>;
View more intereactive examples here.
This ⚠️ note on re-rendering gives answers to some common questions about auto updating field values based on changes in the
yarn add enform
Enform is using React hooks ↩ as per
Consumer projects should have react >= 16.8.0 (the one with hooks) in order to use it.
|children||function||yes||Function that your need to wrap your DOM with. It accepts the
|initial||object||yes||Initial form field values in a form of
|validation||object||no||Validation for the fields. It takes the form of
✔️ Read more about these props here.
Enform exposes its handy Api by passing an
object down to the function wrapper.
<Enform =><form />...</form></Enform>
props object contains 2 data items:
|values||Current field values -
|errors||Current field errors -
and these 8 methods:
|onChange||Updates single field's value -
|reset||Empties form elements.|
|isDirty||Reports if the form is dirty. It takes into account the
|validateField||Triggers single form field validation -
|clearError||Clears single form field's error -
|clearErrors||Clears all errors in the form.|
|setErrors||Sets Enform's internal error state directly. This may be handy when
props.values get updated with
props.errors get updated with
✔️ See more details about Enform's state API.
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 ⚠️ note on re-rendering for a common pitfall case.
Run tests with
jest in watch mode
or no watch
Get gzip size by
That will pipe
src/Enform.js through babel and put it as
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.
Miroslav Nikolov (@moubi)