Refor NPM | npm.io

Refor: React form handler

Overview

Refor dose

handle form events
update state of user inputs

with no interference with UI component structure.

So that, you can use refor in your app much easily!

Supported types of input

string (<input>, <textarea>, <select>)
string[] (<select multiple>)
boolean (<input type="checkbox">)
File (<input type="file">)

Usage

import * as React from 'react';
import { FormHandler, FormSchema, CheckboxInputSchema, TextInputSchema } from 'refor';

interface FormOutputs {
  email: string;
  password: string;
  rememberMe: boolean;
}

interface Props {
  onSubmit(inputs: FormOutputs): void;
}

class Form extends React.Component<Props> {
  private formHandler = new FormHandler({
    schema: new FormSchema({
      inputs: {
        email: new TextInputSchema(),
        password: new TextInputSchema(),
        rememberMe: new CheckboxInputSchema({ initial: true }),
      },
    }),
    onUpdate: () => this.forceUpdate(),
    shouldSubmit: values => values.email !== '' && values.password !== '',
    onSubmit: this.props.onSubmit,
  });

  public render(): JSX.Element {
    const { inputs, handleSubmit } = this.formHandler;

    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor={inputs.email.key}>Email</label>
          <input
            type="text"
            id={inputs.email.key}
            value={inputs.email.value}
            onChange={inputs.email.handleChange}
          />
        </div>

        <div>
          <label htmlFor={inputs.password.key}>Password</label>
          <input
            type="password"
            id={inputs.password.key}
            value={inputs.password.value}
            onChange={inputs.password.handleChange}
          />
        </div>

        <div>
          <label htmlFor={inputs.rememberMe.key}>Remember?</label>
          <input
            type="checkbox"
            id={inputs.rememberMe.key}
            checked={inputs.rememberMe.value}
            onChange={inputs.rememberMe.toggle}
          />
        </div>

        <button type="submit">Submit</button>
      </form>
    );
  }
}