Inertia form component identical to formik but uses inertia useForm in the background
npm install inertiajs-react-formbash
npm install --save inertiajs-react-form
`
Parent dependencies
- react
- @inertiajs/react
Usage
`jsx
import { InertiaForm, LabelField, Form } from 'inertiajs-react-form';
function App() {
return (
enableReInitialization={true}
initialValues={{name: '', last_name: ''}}
>
{({data, setData, errors, reset, progress,processing, handleSubmit})=> (
<>
)}
);
}
export default App;
`
InertiaForm
InertiaForm component sets the context using useForm hook and initial values.
$3
| name | data type | required | defaultValues|
|----------------------|-----------|----------|--------------|
|initialValues | object | true | undefined |
| onSubmit | function | true | undefined |
|enableReInitialization| boolean | false | false |
Form
renders form and passes the submit function
LabeledDropdown
Renders a labled dropdown
$3
| name | data type | required | defaultValues |
|--------------------|-----------|----------|---------------|
| list | array | true | [] |
| name | string | true | '' |
| label | string | false | '' |
| errorClassName | string | false | text-danger |
| labelClassName | string | false | form-label |
| selectClassName | string | false | form-select |
| onChange | function | false | undefined |
| formateLabel | function | false | undefined |
$3
`jsx
<>
{name}
)}
list={companies}
onChange={(value) => setData({
...data,
company_id: value,
})}
label="Company"
name="company_id"
/>
``