React Hook Form - API

Github repo: https://github.com/concrete-form/react-hook-form

<Form />

<Form /> renders a <form> HTML element and creates a context for the controls. All controls rendered inside this component will be registered automatically with React Hook Form.

Props

	Name	Type	Required	Default	Description
	form	object			Result of useForm()
	onSubmit	function			Forwarded to handleSubmit()
	formProps	object			Forwarded to <form {...formProps} /> element
	noValidate	boolean		true	Shorthand prop for <form noValidate />
	layout	object			Learn how to customize layouts (HTML5 example)
	disableWhileSubmitting	boolean		true	Disable all the controls when the form is submitting
	language	string		en	For default translations when no translator is provided
	translator	function			Learn how to handle translations

Examples

Without a form instance

info

When not provided, a form instance is created automatically with useForm() and the default parameters.

import Form from '@concrete-form/react-hook-form'
import Input from '@concrete-form/html5/Input'
import SubmitButton from '@concrete-form/html5/SubmitButton'

const Demo = () => {
  const onSubmit = data => { alert(JSON.stringify(data, undefined, 2)) }

  return (
    <Form onSubmit={onSubmit}>
      <Input name="firstName" placeholder="What's your first name ?" />
      <SubmitButton>submit</SubmitButton>
    </Form>
  )
}

With an existing form instance

import { useForm } from 'react-hook-form'
import Form from '@concrete-form/react-hook-form'
import Input from '@concrete-form/html5/Input'
import SubmitButton from '@concrete-form/html5/SubmitButton'

const Demo = () => {
  const form = useForm({
    mode: 'onTouched',
    defaultValues: { firstName: 'John' }
  })

  const onSubmit = data => { alert(JSON.stringify(data, undefined, 2)) }

  return (
    <Form form={form} onSubmit={onSubmit}>
      <Input name="firstName" placeholder="What's your first name ?" />
      <SubmitButton>submit</SubmitButton>
    </Form>
  )
}

React Hook Form context

The React Hook Form Context is automatically exposed so it's possible to use useFormContext() normally inside <Form />.

Custom field properties

With any Concrete Form control, you can provide a prop fieldProps. If provided, that object will be forwared to register().

Example

import Form from '@concrete-form/react-hook-form'
import Input from '@concrete-form/html5/Input'
import SubmitButton from '@concrete-form/html5/SubmitButton'

const Demo = () => {
  const onSubmit = data => { alert(JSON.stringify(data, undefined, 2)) }

  return (
    <Form onSubmit={onSubmit}>
      <Input
        name="firstName"
        placeholder="What's your first name ?"
        fieldProps={{
          required: true,
          minLength: { value: 5, message: 'too short !' }
        }}
      />

      <SubmitButton>submit</SubmitButton>
    </Form>
  )
}

Validation translations

tip

Learn how to handle translations

With React Hook Form, it's possible to add field-level validation during register(). If you don't provide an error message, a generic one will be used.

React Hook Form Validation	Generic fallback key	Default (en)
required	required	this field is required
minLength	minlength	this field must be at least {{min}} characters
maxLength	maxlength	this field must be at most {{max}} characters
min	min	this field must be greater than or equal to {{min}}
max	max	this field must be less than or equal to {{max}}
default	default	this field is invalid

Schema Validation

We strongly beleive that Schema Validation is a better option instead of field-level rules. Schema validation (such as Yup) will provide better reusability and maintainability.

Translations metadata

Whenever an error is generated by React Hook Form field-level validation, some metadata are provided to the validator, here is an example :

{
  "meta": {
    "from": "react-hook-form",
    "args": {
      "type": "minLength",
      "options": {
        "min": 15
      }
    }
  }
}

• from : react-hook-form
• type is the original error type from React Hook Form
• options is a copy of the object provided to register()