Enform - enjoyable forms with React

<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

: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:

and these 7 methods:

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

MIT