React-form-logic NPM

react-form-logic

This is a form-handling library for React that makes it easy to:

serialize forms into JSON and submit them to the server
set up client-side validations without installing any additional libraries
combine server-side validations with client-side validations in a streamlined way
internationalize validation error messages

The library is also meant to:

have a stable API
be small and self-contained
keep your form-handling code similar to all your other React-based code
leave full control of the markup to your React components
not interfere with any other custom dynamic behaviour you might want to build into your forms

Getting started

react-form-logic works by generating a wrapper component for the component that renders your form, based on an object that defines the logic for the form (hence the name of the library). This object defines the field names, validations and custom event handlers for the fields. It looks like this:

const form = FormLogic.Form({
  name: 'SignUpForm',
  fields: {
    email: FormLogic.Field({ presence: true }),
    password: FormLogic.Field({ presence: true })
  }
});

The wrapper component will accept some additional props that your original component itself does not handle and will also inject additional props into your component that you then need to pass to your \<form>, your \<label>'s and \<input>'s. Continuing the previous example:

@FormLogic(form)
export class SignUpForm extends Component {
  render() {
    return (
      <Form {...this.props.formProps}>
        <InputField caption='E-mail' />
        <PasswordField caption='Password' />
      </Form>
    );
  }
}

export const Form = () => {
};

export const InputField = () => {
};

export const PasswordField = () => {
};

export const Button = () => {
};