https://github.com/h5sh/react-inertia-form
Inertia Form Component for React
https://github.com/h5sh/react-inertia-form
Last synced: about 2 months ago
JSON representation
Inertia Form Component for React
- Host: GitHub
- URL: https://github.com/h5sh/react-inertia-form
- Owner: H5SH
- Created: 2024-05-10T14:37:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-01T00:24:24.000Z (about 2 years ago)
- Last Synced: 2025-05-30T05:39:28.045Z (about 1 year ago)
- Language: JavaScript
- Size: 639 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# inertiajs-react-form
> Inertia form component identical to formik but uses inertia useForm in the background
[](https://www.npmjs.com/package/inertiajs-react-form) [](https://standardjs.com)
## Install
```bash
npm install --save inertiajs-react-form
```
## Parent dependencies
- react
- @inertiajs/react
## Usage
```jsx
import { InertiaForm, LabelField, Form } from 'inertiajs-react-form';
function App() {
return (
console.log(data)}
enableReInitialization={true}
initialValues={{name: '', last_name: ''}}
>
{({data, setData, errors, reset, progress,processing, handleSubmit})=> (
<>
Submit
>
)}
);
}
export default App;
```
## InertiaForm
InertiaForm component sets the context using useForm hook and initial values.
### props
| 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
### props
| 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 |
### Formate label example
```jsx
(
<>
{name}
>
)}
list={companies}
onChange={(value) => setData({
...data,
company_id: value,
})}
label="Company"
name="company_id"
/>
```
## LabelField
### props
| name | data type | required | defaultValues |
|--------------------|-----------|----------|---------------|
| disabled | boolean | false | undefined |
| name | string | true | '' |
| label | string | false | '' |
| type | string | false | text |
| placeholder | string | false | undefined |
| errorClassName | string | false | text-danger |
| labelClassName | string | false | form-label |
| fieldClassName | string | false | form-control |
| onChange | function | false | undefined |
## LabelTextArea
### props
| name | data type | required | defaultValues |
|--------------------|-----------|----------|---------------|
| rows | integer | false | 4 |
| cols | integer | false | 5 |
| name | string | true | '' |
| label | string | false | '' |
| placeholder | string | false | undefined |
| errorClassName | string | false | text-danger |
| labelClassName | string | false | form-label |
| textareaClassName | string | false | form-control |
| onChange | function | false | undefined |
## License
MIT © [H5SH](https://github.com/H5SH)