Uninformed: nostalgically simple forms for React & Preact

#react #javascript #rails

Forms in Rails do two useful things automatically that I miss when I'm working in other frameworks:

They submit data without reloading the page.
They disable themselves on submit, so that you can't accidentally submit data twice by double-clicking.

These are great defaults! In a web app in 2019, I should have to write code to disable this behavior -- but I've found myself re-implementing it from scratch in several React projects.

I wrote Uninformed to bring these defaults to the React ecosystem. Here's how to use Uninformed in an app:

import { Form } from 'uninformed';
import React from 'react';

const SignupForm = props => (
  <Form action="/api/signups" onSuccess={props.handleSuccess}>
    <input type="email" name="email" required />
    <input type="submit" value="Sign Up" />
  </Form>
)

That’s it! No onChange handlers, no Input components, just a lightly-enhanced HTML form that disables itself on submit, sends data to a server via an XMLHttpRequest, and re-enables itself after the server responds. When you need more power -- for setting request headers, running input validation, etc -- Uninformed lets you customize its behavior by passing functions as props. See the README for more info.

Uninformed is brand new, and I'd love to hear your ideas for how to improve it! Please feel free to file issues, pull requests, or ask questions in the comments below.

(Cover image by Kelly Sikkema via Unsplash)