Controlled Forms

react-controlled-form aims to simplify form management with React and Redux.
It ships functional APIs to create your very own form fields and is built with flexibility and customization in mind.

It allows you to bring your own components.
You do not have to struggle with predefined input components ever again!

Installation

yarn add react-controlled-form react react-redux redux

Controlled Forms requires react-redux to be installed in your project. Therefore, react and redux must also be installed.

Benefits

simple functional API
Redux-driven state management
full flexibility
custom form fields
reactive forms

The Gist

import { Form, asField, asSubmit } from 'react-controlled-form'

function InputField({
  value,
  updateField,
  isRequired,
  isValid
}) {
  // we could also do validation here and
  // update isValid in updateField respectively
  function onInput(e) {
    updateField({ value: e.target.value })
  }

  return (
    <input
      value={value}
      required={isRequired}
      disabled={!isEnabled}
      onInput={onInput}
    />
  )
}

function SubmitButton({ submitForm }) {
  return (
    <button onClick={submitForm}>
      Submit
    </button>
  )
}

const Input = asField(InputField)
const Submit = asSubmit(SubmitButton)

function onSubmit({ data }) {
  console.log("Submitted: ", data)
}

export default () => (
  <Form formId="name" onSubmit={onSubmit}>
    <Input fieldId="firstname" />
    <Input fieldId="lastname" />
    <Submit />
  </Form>
)

Documentation

Examples

Simple Example (demo | source)
Validation Example (demo | source)
Third-Party Component Example (demo | source)

License

react-controlled-form is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.

kalongthewires/react-controlled-form