Introducing Reforma - A Local-State Approach to Forms in React

I posted something about a week or two ago about making a form library with React.

I like Redux-Form, but I don't like putting my form's state into the redux-store. That kind of defeats the purpose of the store...

I like Formik, but it's a tank of a library and comes with a lot of bells and whistles I never really asked for...

At my current workplace (The Bouqs Company), we made a little library called "FormManager", which has worked out extremely well for us in building forms with nested fields quickly and easily. I approached my CTO about releasing something like this open source, and he asked me to release it under my own name, and not under the Bouqs.

On my own time, I made some pretty heavy changes under the hood with all the React 16 goodness like Fragment, and using some nice ES syntax proposals like optional chaining.

I'm happy to announce this library is finished and complete! You can start using it today!

npm install react-reforma --save

import React from 'react';
import Reforma, { 
    InputField,
    CheckboxField } from 'react-reforma';

export default function LoginForm(props) {
  const { onSubmit, errors } = props;
  return (
    <Reforma onSubmit={onSubmit} errors={errors}>
        <InputField name="username" />
        <InputField name="password" type="password" />
        <CheckboxField name="remember" label="Remember on this computer?" />
        <button type="submit">Login</button>
    </Reforma>
  );
}

Just a few lines of code, and you don't need to worry about onChange and value props. All of that stuff is taken care of under the hood for you.

<*Field> components don't need to be direct children either... You can nest them and style the containers:

<Reforma onSubmit={this.props.onSubmit} errors={this.props.errors}>
  <div className="input-fields">
    <InputField name="username" />
    <InputField type="password" />
  </div>
  <div className="remember-field">
    <CheckboxField name="remember" label="Remember on this computer?" />
    <p className="remember-field-text">
       Note: This option not recommended for shared computers.
    </p>
    <p className="bold">
      Only use check this box if you are the only user of this device!
    </p>
  </div>
  <div className="submit-button-container">
    <button type="submit">Login</button>
  </div>
</Reforma>

Reforma will render all children and detect when a there's a <*Field> component and automagically inject onChange, value, and error props into those fields, so you won't need to worry about them at all.

If you want to learn more and start using Reforma for yourself, you can see the full documentation and Github repo here

Thanks for reading! I hope you enjoy using my tool :)