Quick Start
A simple and basic controlled hook form. Aiming to create forms with minimal effort.
Features
- Controlled form.
- Possibility of using
class
as default form data (see moreDefault Values
). - No native validation. The entire validation is up to the developer.
- Simple to use with existing HTML form inputs and 3rd-party UI libraries.
- Build with typescript.
- Easy to use in react and react-native.
Installation
Install using Yarn:
yarn add @resourge/react-form
or NPM:
npm install @resourge/react-form --save
Example
For a example, you can follow the code below:
import { useForm } from '@resourge/react-form'
function App() {
const {
form,
isTouched,
isValid,
field,
handleSubmit
} = useForm(
{
productName: ''
},
{
// Form validation
// @resourge/schema recommended use
validate: () => []
}
)
const onSubmit = handleSubmit((form) => {
console.log('form', form)
// Send it to backend
})
return (
<div>
<button
onClick={onSubmit}
>
Submit
</button>
<div>
<label>
Product Name
</label>
<input { ...field('productName')} />
</div>
</div>
)
}
Note: Wrapping the form fields with <form></form>
is optional.
On This Page