@oneform/react

OneForm

The OneForm you need!

**📝 Official Docs: https://docs.oneform.dev **

Features

• No external dependencies (except React).
• Super clean API.
• Validation and group validation built-in.
• Write your own validations or use your favorite library.
• Works with both standard HTML elements and custom React components.
• Minuscule bundle size.
• Ridiculously fast. Built to never be a bottleneck.

Installation

With npm:

npm install @oneform/react

Or with yarn:

yarn add @oneform/react

Quick Start

With OneForm, you don't need to worry about forms ever again. Not because it's the best form library out there, but because it doubles as a state manager. Yes, that means you could build an entire React app with OneForm! Now, you're playing with power!

Here's a simple example of OneForm in action:

<OneFormProvider>
  <Field>
    <input name="message" />
  </Field>
</OneFormProvider>

No magic, it just works. Don't believe me? Here's a realistic example:

import {
  Input,
} from '@material-ui/core'
import {
  Field,
  OneForm,
} from '@oneform/react'

<OneFormProvider
  onSubmit={({
    registeredValues,
  }) => (
    // Do stuff, then tell OneForm you're done.
    Promise
    .resolve()
  )}
>
  <Field>
    <Input name="email" />
  </Field>
  <Field>
    <Input name="password" />
  </Field>
  <div>
    <button type="submit">
      Submit
    </button>
  </div>
</OneFormProvider>

OneForm handles everything for you. Values, errors, messages, submit button disabling, onChange handlers, etc. Unlike other form libraries, you don't have to pass any special props to Field, just give it an input, and you're ready to go!

Caveats

To use Field, there is a caveat. Your input component needs to have a name prop and it needs to accept a value prop. Even if it doesn't, no big deal, there's a field translation component which will customize Field for your particular components.

Special Thanks

This project wasn't just something I came up with in a bubble. It was brought on by the fact I, and the others I worked with, wanted a better experience building complex forms.

These are the folks at Minted that played a big part in the creation of Minted Forms (which was the inspiration for OneForm):

• Giselle Ghadyani
• Rebekah Heacock Jones
• Peter Carnesciali
• Everyone else at Minted!

The logo is important too!

The logo and title are courtesy of Noah Raskin. He does some amazing graphic design and even creates custom icon libraries! Talk about dedication to small details!

While this logo looks simple, there's a lot going on behind the scenes, and the way he shaded it amazed me as much as the cleanliness of OneForm's API.