How to use React-use-form

react-use-form is a small library for building forms in React applications. It provides a hook for managing form state and validation, as well as a set of custom form components for different types of form fields.

To use react-use-form in your React app, you first need to install it via npm:

npm install react-use-form

Then, you can import the hook and form components that you need in your component file. Here is an example of how to use the useForm hook to create a simple login form:

import React from 'react'
import { useForm } from 'react-use-form'
import { Input, Button } from 'react-use-form/lib/components'

function LoginForm() {
  const { formState, handleSubmit } = useForm({
    initialValues: {
      username: '',
      password: '',
    },
    onSubmit: (values) => {
      console.log(values)
      // send values to the server, etc.
    },
  })

  return (
    <form onSubmit={handleSubmit}>
      <Input name="username" formState={formState} />
      <Input name="password" formState={formState} type="password" />
      <Button type="submit" disabled={formState.submitting}>
        Log In
      </Button>
    </form>
  )
}

This will create a form with two text input fields (for username and password) and a submit button. The useForm hook manages the form state and validation, and the Input and Button components are custom form components provided by react-use-form. When the form is submitted, the onSubmit function passed to useForm will be called with the form values.

Initializing the form

To initialize the form with react-use-form, you need to call the useForm hook and pass it an options object. The options object can have the following properties:

• initialValues: An object that specifies the initial values for the form fields. Each key in the object corresponds to the name of a form field, and the value is the initial value for that field.

• onSubmit: A function that will be called when the form is submitted. It will be passed an object containing the form values.

• validate: A function that will be called when the form is submitted, and can be used to perform validation on the form values. It should return an object containing any errors found in the form, with the keys being the names of the form fields and the values being the error messages.

Here is an example of how you might use these options to initialize a form:

const { formState, handleSubmit } = useForm({
  initialValues: {
    username: '',
    password: '',
  },
  onSubmit: (values) => {
    console.log(values)
    // send values to the server, etc.
  },
  validate: (values) => {
    const errors = {}
    if (!values.username) {
      errors.username = 'Username is required'
    }
    if (!values.password) {
      errors.password = 'Password is required'
    }
    return errors
  },
})

Rendering the form

Once you have initialized the form with useForm, you can use the formState object and handleSubmit function to render the form in your component. The formState object contains the current state of the form, including the values of the form fields and any errors that have been identified.

To render the form fields, you can use the Input component provided by react-use-form. The Input component takes a name prop that specifies the name of the form field, and a formState prop that specifies the form state object returned by useForm. For example:

<Input name="username" formState={formState} />
<Input name="password" formState={formState} type="password" />

You can also use the formState object to display any errors that have been identified in the form. For example:

{formState.errors.username && <div>{formState.errors.username}</div>}
{formState.errors.password && <div>{formState.errors.password}</div>}

To handle form submission, you can use the handleSubmit function passed to your component by useForm. You should pass this function to the onSubmit event of your form element, like this:

<form onSubmit={handleSubmit}>
  ...
</form>

When the form is submitted, the onSubmit function passed to useForm in the options object will be called with the form values.

• Date: 04 Jan 2023