react-connect-form

Controlled forms for React.

-
-
-
-
- Connectors
- createForm
- createField
- withForm
- Helpers
- validators

Examples

$3

jsx
import { Form, Field, Submit } from "react-connect-form"

const UserForm = () => ( name="first_name" type="text" placeholder="First name" /> name="last_name" type="text" placeholder="Last name" /> name="email" type="text" placeholder="Email" /> Submit )`

`$3`

jsx
import { Form, Field, Submit } from "react-connect-form"
import regex from 'regex-email'
function isEmail(value) {
  if (!regex.test(value)) {
    return "Please enter a valid email address"
  }
}
const EmailForm = () => (
  

          name="email"
      type="text"
      placeholder="Email"
      validators={[isEmail]}
    />
    Submit
  
)

$3

jsx
import { Form, Field, Submit, validators } from "react-connect-form"
const { isEmail } = validators
function isUniqueEmail(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value === "robert@gmail.com") {
        reject("Email is already in use")
      } else {
        resolve()
      }
    }, 1000)
  })
}
const EmailForm = ({ handleSubmit }) => (
  

          name="email"
      type="text"
      placeholder="Email"
      validators={[isEmail, isUniqueEmail]}
    />
    Submit
  
)


$3

$3

$3
API
$3

####


####


####


$3

####

createForm


####

createField


####

withForm


$3

####

validators`

react-connect-form

Controlled forms for React.

Examples

$3

jsx
import { Form, Field, Submit } from "react-connect-form"

const UserForm = () => ( name="first_name" type="text" placeholder="First name" /> name="last_name" type="text" placeholder="Last name" /> name="email" type="text" placeholder="Email" /> Submit )`

`$3`

jsx
import { Form, Field, Submit } from "react-connect-form"
import regex from 'regex-email'
function isEmail(value) {
  if (!regex.test(value)) {
    return "Please enter a valid email address"
  }
}
const EmailForm = () => (
  

          name="email"
      type="text"
      placeholder="Email"
      validators={[isEmail]}
    />
    Submit
  
)

$3

jsx
import { Form, Field, Submit, validators } from "react-connect-form"
const { isEmail } = validators
function isUniqueEmail(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value === "robert@gmail.com") {
        reject("Email is already in use")
      } else {
        resolve()
      }
    }, 1000)
  })
}
const EmailForm = ({ handleSubmit }) => (
  

          name="email"
      type="text"
      placeholder="Email"
      validators={[isEmail, isUniqueEmail]}
    />
    Submit
  
)


$3

$3

$3
API
$3

####


####


####


$3

####

createForm


####

createField


####

withForm


$3

####

validators`

react-connect-form

react-connect-form

Quick Links

Examples

$3

`$3`

$3

$3

$3

$3

API

$3

$3

$3

react-connect-form

react-connect-form

Quick Links

Examples

$3

`$3`

$3

$3

$3

$3

API

$3

$3

$3