Extra functionality for Inertia.js useForm hook
npm install use-inertia-formA hook for using forms with Inertia.js, meant to be used as a direct replacement of Inertia's useForm hook.
It address two issues with the original: the bug preventing the transform method from running on submit, and the lack of support for nested form data.
This was developed alongside a Rails project, so the form handling ethos follows Rails conventions, however, effort was taken to make it as agnostic as possible and it should be useable in a Laravel application as well.
I've chosen to keep the main readme clean and only provide basic examples to help get started.
More in depth documentation is available on the Wiki section of this repo
Here is a codesandbox with usage examples for all hooks and components
If you encounter a bug, please try to recreate it with a fork of the codesandbox below and submit it with the issue. I don't have much time to address issues, so seeing an actual recreation can really help me identify if it's something I should look into.
Below are basic usage examples of the exported members of this project
Drop in replacement for Inertia.js' useForm, with support for nested data
``typescript
const { data, setData, getData, unsetData, errors, setError, getError } = useInertiaForm({
user: {
firstName: 'Finn'
lastName: undefined
}
})
getData('user.firstName')
setData('user.lastName', 'Human')
`
Create a custom form component for your project
`typescript
import { Form as InertiaForm, type FormProps, type NestedObject } from 'use-inertia-form'
const Form =
{ children, railsAttributes = true, className, ...props }: FormProps
) => {
return (
}
railsAttributes={ railsAttributes }
{ ...props }
>
{ children }
)
}
`
Create custom inputs for your project
`typescript
import { useInertiaInput } from 'use-inertia-form'
const TextInput = ({ name, model, label }) => {
const { inputName, inputId, value, setValue, error } = useInertiaInput({ name, model })
return (
id={ inputId }
name={ inputName }
value={ value }
onChange={ e => setValue(e.target.value) }
>
{ error &&
$3
Helper component for visually specifying nested data lookup context
typescript
import { NestedFields } from 'use-inertia-form'
import { Form, TextInput } from 'my/project/components'const user = {
firstName: 'Finn',
preferences: {
princess: 'Bubblegum',
sword: 'Scarlet'
}
}
const EditUserForm = () => {
return (
)
}
`$3
Build a custom component for handling arrays in nested data object
typescript
import { useDynamicInputs, NestedFields } from 'use-inertia-form'const DynamicInputs = ({ children, model, label, emptyData }) => {
const { addInput, removeInput, paths } = useDynamicInputs({ model, emptyData })
return (
<>
{ paths.map((path, i) => (
{ children }
)) }
)
}
`$3
Not necessary to use, any submit button in the