use-form / Use Form
Programming Languages
Projects that are alternatives of or similar to Use Form
Welcome to useForm 👋
useFom provide a way to create complex forms easily.
🏠 Homepage
✨ Demo
Description
Forms are an important part of web applications, and with react it's possible to create greats forms,
react hooks are a game-changer when we think about forms, with hooks is very simple to create forms, and you can go on without libraries.
But when we wanna complex forms with many validations and complex objects with several layer and properties is appropriate to use a library form to manager the state of inputs and its validations.
For this reason, there is useForm, with useForm we can make greats forms and complex validations with less line code.
UseForm provides a way to create complex forms easily, this hook returns an object of values in the same shape that it receives, this is possible using dot notation. Therefore, it does not matter if the object is complex or has many properties or array, the result is the same. This process turns very easily to create forms from an object with several layers, the same layers and properties are replicated in the final object, this approach prevents you to type more code to convert an object from form to backend object type. The same process is realized with errors object and touched objects.
What to expect with useForm
- Performer forms - useForm provides a way to complete a form and submit it without any rerender, by default useForm creates uncontrolled forms.
- Easy to write - useForm has an easy way to write forms with less code. register function return necessary input's properties and it is all we need to manage all events in a native HTML
input. Writhe forms without form tag. - Easy validation - By default useform uses yup validation, we can write complex validation without effort.
Instalation
npm i @use-form/use-form
yarn add @use-form/use-form
Usage
useForm provides a register function, this function as a link with input and a object property of form state.
import { useForm } from "@use-form/use-form";
/*
* initial Values optional
*/
const initialValues = {
name: 'Jesse',
email: '[email protected]',
score: 25,
}
const {
register,
state: { values },
} = useForm({ initialValues, isControlled: true })
Use dot notation to create advanced objects or to map object values. Type an entry name and type or an entry property object.
<Input placeholder="Name" {...register("name")}/>
<Input placeholder="E-mail" type="email" {...register("email")}/>
<Range {...register("score")}/>
Post https://dev.to/jucian0/building-forms-with-useform-1cna
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Show your support
Give a ⭐️ if this project helped you!