inertia-react@v0.5.4

New form helper

This release adds a new form helper to the React adapter (#516), similar to the existing form helpers in the Vue 2 and Vue 3 adapters. It is designed to help reduce the amount of boilerplate needed for typical forms.

Example

Here's how to use it:

import React from 'react'
import { useForm } from '@inertiajs/inertia-react'

import TextInput from './TextInput'
import LoadingButton from './LoadingButton'

const { data, setData, post, processing, errors } = useForm({
  name: '',
  email: '',
})

function submit(event) {
  event.preventDefault()
  post('/users')
}

return (
  <form onSubmit={submit}>
    <TextInput label="Name" value={data.name} errors={errors.name} onChange={(e) => setData('name', e.target.value)} />
    <TextInput
      label="Email"
      value={data.email}
      errors={errors.email}
      onChange={(e) => setData('email', e.target.value)}
    />
    <LoadingButton loading={processing} type="submit">
      Submit
    </LoadingButton>
  </form>
)

API

Here are a complete list of all the available properties:

• data
• errors
• hasErrors
• processing
• progress
• wasSuccessful
• recentlySuccessful

And, here is a complete list of all the available methods:

• setData(key, value), setData(values), setData(callback)
• transform(callback)
• reset(), reset(fields)
• clearErrors(), clearErrors(fields)
• submit(method, url, options)
• get(url, options)
• post(url, options)
• put(url, options)
• patch(url, options)
• delete(url, options)