Logo

Welcome to useForm 👋

useForm 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 simple to create forms, and you can go on without libraries.
But when we want to build complex forms with nested fields and validations, maight be a good idea to use a library, and you can find a lot of libraries to help you to create forms.

So, why UseForm?

There are some reasons why you face problems when you want to create forms, and with useForm you can solve this problems.


  • State management - A couple of yeears ago, you could think that Redux or MobX was a good solution to manage form state in react, but they wasn't. Today you can use hooks to manage form state, hooks like useStatew and useReducer are a good solution to manage state. But manage values, touched fields and errors could be a problem if you don't have a standard way to manager them. Usually real applications use nested objects as request paylooads, and you should keep it in order to send the correct data to the server, manage nested values and errors could be a problem using just useState and useReducer.
  • Errors - To deal with errors, you can use your woun validation solution, and it can work well with simple forms, but you can stuck with a lot of errors when you have nested fields.
  • Touched fields - Maybe you want to show a message error just when the field is touched, so in order to do that you need to manager the touched fields, it can be really easy to do with useState and useReducer, but you can't do that very well with useState and useReducer when you have nested fields.
  • Handle submit - When you want to handle submit, you need to manage the submit event, it's really convinient when you have a already solution to do that.

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.

Installation

bash
npm install --save @use-form/use-form
bash
yarn add @use-form/use-form

Usage

With createForm you can create a hook form and use it wherever you want,


javascript
import { createForm } from '@use-form/core'
const useUserForm = createForm({
initialValues: {
name: '',
email: '',
password: '',
confirmPassword: '',
},
})
jsx
funtion UserForm(){
const { register, handleSubmit } = useUserForm()
const onSubmit = (data) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input ref={register('name')} />
<input ref={register('email')} />
<input ref={register('password')} />
<input ref={register('confirmPassword')} />
<button type="submit">Submit</button>
</form>
)
}

Post

🤝 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!

📝 License

Copyright © 2020 useForm.

This project is MIT licensed.