JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs 1.2.2 release Aug 30, 2017
examples Add initialFields to validate example Aug 29, 2017
modules remove initialState from form-element Oct 20, 2017
reference 1.1.7 release Jun 26, 2017
types initial push Jun 9, 2017
.babelrc initial push Jun 8, 2017
.codeclimate.yml initial push Jun 8, 2017
.eslintignore initial push Jun 9, 2017
.eslintrc initial push Jun 9, 2017
.flowconfig initial push Jun 8, 2017
.gitignore fix tests Jun 11, 2017
.jshintrc initial push Jun 8, 2017
.prettierrc update deps Sep 20, 2017
.travis.yml fix tests Jun 11, 2017
CNAME update docs Jun 11, 2017
Changelog.md 1.2.5 release Oct 20, 2017
LICENSE Initial commit May 19, 2017
README.md add sponsoring header Sep 2, 2017
SUMMARY.md 1.2.2 release Aug 30, 2017
book.json initial push Jun 9, 2017
package-lock.json update deps Sep 20, 2017
package.json 1.2.5 release Oct 20, 2017
yarn.lock 1.2.5 release Oct 20, 2017

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

Sponsor

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

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.