mirror of
https://github.com/theoludwig/react-component-form.git
synced 2024-07-17 07:30:13 +02:00
2.5 KiB
2.5 KiB
react-component-form
Manage React Forms with ease.
📜 About
react-component-form is a lightweight form component for React.js, it allows you to get the inputs values without state thanks to onChange
or onSubmit
props.
Demo : https://divlo.github.io/react-component-form/.
This project was bootstrapped with create-react-library.
💾 Install
npm install --save react-component-form
⚙️ Usage
import React from 'react'
import Form, { HandleForm } from 'react-component-form'
const Example = () => {
const handleSubmit: HandleForm = (formData, formElement) => {
console.log(formData) // { inputName: 'value of the input' }
formElement.reset()
}
return (
<Form onSubmit={handleSubmit}>
<input type='text' name='inputName' />
<button type='submit'>Submit</button>
</Form>
)
}
Note : The example use TypeScript, but obviously you can use JavaScript. Be aware that HandleForm
is the type definition for the onChange
and onSubmit
props.
Basically you have access to the same props of the HTML form
tag in React, but the onSubmit and the onChange props are differents.
Instead to get the event
param you get formData
and formElement
params :
formData
: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the FormData constructor.formElement
: It's the actual HTML form element in the DOM so for example you can access the.reset()
method on a HTMLFormElement.