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

Ben Junya — Sun, 28 Oct 2018 20:56:08 +0000

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

Local State Forms in React

Ben Junya — Mon, 15 Oct 2018 16:57:05 +0000

From the last couple of companies I've worked at, freelance and full time, I've ported by own little React Forms library and introduced them to every team I've worked on. It's small, agnostic, and straightforward, allows one to do client-side and server-side validations, showing errors through the parent component rendering it.

Here's a little bit of what it looks like:

import React from 'react';
import FormManager from '../component/FormManager';
import { InputField, RadioButtonField } from '../component/FormManager/Fields';

class IndexPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {}
    };
  }

  onFormInput = values => {
    // Your own validation stuff happens here.
    // If there's an error, you do this:
    /*
      this.setState({ errors: { password: 'Incorrect password' } });
    */
  }

  onSubmit = values => {
    // Handle submit logic here!
  }

  render() {
    <div>
      <FormManager errors={this.state.errors} onValueChange={this.onFormInput} onSubmit={this.onSubmit}
        <InputField name="username" />
        <InputField name="password" type="password" />
        <p>Take me to:</p>
        <RadioButtonField 
          name="next_view" 
          value="dashboard" 
          label="Dashboard"
        />
        <RadioButtonField 
          name="next_view" 
          value="account_page" 
          label="My Account Page" 
        />
      </FormManager>
    </div>
  }
}

Thing is, I'd love to release this open source, but looking at Formik, it's extremely popular with over 10k stars, and my library definitely doesn't have the bells and whistles that come with Formik. I just wanted to make my own tool that requires minimal boilerplating and is easy to look at, just by looking at the code.

If anything, I'd call it Reforma - A Local-State driven approach to forms in React.

What do you guys think?

DEV Community: Ben Junya

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

Local State Forms in React