@uncontrolled/react

About Uncontrolled

Uncontrolled is a form component designed to complement use of HTML5 form fields and validation. There is no state management, no form field/control libraries to mess with, and no validation.

Why?

Because HTML has already done that for you, and using the native HTML form fields (and validation) is quite pleasant, not to mention effective. Check out the example below if you're skeptical. It's got state management and validaton baked in.

Validation

See the MDN docs on HTML Form validation: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

State Management

The DOM.

Seriously.

This isn't true in other areas of React, but When it comes to forms the most accurate state management you could have is the DOM.

WARNING

This package is in beta and there are no guarantees that version changes will retain backwards compatability. Use and update at your own risk.

That said, much of the API itself is likely settled.

Install

using yarn

yarn add @uncontrolled/react

using npm

npm i @uncontrolled/react

Usage

import React from 'react'
import useForm from '@uncontrolled/react'

function Example(props) {
  const {Form} = useForm()
  return React.useMemo(() => (
    <Form
      onSubmit={({ fieldData }) => {
        console.log({ fieldData });
      }}
    >
      <label>First Name</label>
      <input type="text" required min={2} name="firstName" />
      <button type="submit">Submit</button>
    </Form>
  ), []);
}

Working Example

Check out this fully working example on Codesandbox

License

MIT © brentmclark