Skip to content
Flexible, Modular & Controlled Forms for React and Redux
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
docs
examples
modules
types
.babelrc
.codeclimate.yml
.eslintignore
.eslintrc
.flowconfig
.gitignore
.jshintrc
.prettierrc
.travis.yml
CNAME
Changelog.md
LICENSE
README.md
SUMMARY.md
book.json
lerna.json
package.json
yarn.lock

README.md

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!

TravisCI Test Coverage npm downloads npm version

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, Field } from 'react-controlled-form'

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

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

function UserForm({
  data
}) {
  const onSubmit = () => console.log("Submitted: ", data)

  return (
    <form onSubmit={onSubmit}>
      <Field fieldId="firstname" render={Input} />
      <Field fieldId="lastname" render={Input} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default () => (
  <Form formId="user" render={UserForm} />
)

Documentation

Examples

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.

You can’t perform that action at this time.