DEV Community

Cover image for How to use React Hook Form with Material UI
Sean Connolly
Sean Connolly

Posted on • Originally published at seanconnolly.dev

How to use React Hook Form with Material UI

React Hook Form recently won the Productity Booster Award at React Summit so if you are not familiar with React Hook Form, now is a good time to learn it. React Hook Form is performant, has great docs and it works everywhere (including React Native).

Material UI continues to be the most popular open source React component library out there.

So if you are a React developer, there is a good chance you will find yourself with the opportunity to use Material UI's form components with React Hook Form.

A basic TextField

If you are working with forms in Material UI, you are most likely working with the TextField component like this one:

import { TextField } from '@material-ui/core';

const BasicTextField = () => {
  return <TextField id="name" helperText="A basic TextField component" />;
};

export default BasicTextField;
Enter fullscreen mode Exit fullscreen mode

Add React Hook Form

If you follow the React Hook Form docs, you will see code that looks like this:

<input name="example" ref={register} />
Enter fullscreen mode Exit fullscreen mode

This doesn't quite work out of the box with Material UI's TextField component. Instead, we need to make use of the inputRef prop on TextField as demonstrated in this example.

import { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from 'react-hook-form';

interface Inputs {
  name: string;
}

const HookedTextField = () => {
  const [name, setName] = useState<string>();
  const { register, handleSubmit } = useForm<Inputs>();

  const onSubmit = async (data: Inputs) => {
    setName(data.name);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextField inputRef={register} id="name" name="name" helperText="Enter your name and press [Enter]" />
      </form>
      {name && <div>Submitted: {name}</div>}
    </>
  );
};

export default HookedTextField;
Enter fullscreen mode Exit fullscreen mode

Reset the form

Sometimes you need to manually reset form state. React Hook Form makes this easy.

const { register, handleSubmit, reset } = useForm<Inputs>();

const onSubmit = async (data: Inputs) => {
  setName(data.name);
  reset();
};
Enter fullscreen mode Exit fullscreen mode

Watch fields

React Hook Form also provides the watch function that allows you to immediately respond to changes in form state.

const { register, handleSubmit, watch } = useForm<Inputs>();

// This field will update as the user types
const currentName = watch('name');
Enter fullscreen mode Exit fullscreen mode

Putting it all together

import { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from 'react-hook-form';

interface Inputs {
  name: string;
}

const FinalTextField = () => {
  const [name, setName] = useState<string>();
  const { register, handleSubmit, reset, watch } = useForm<Inputs>();

  const currentName = watch('name');

  const onSubmit = async (data: Inputs) => {
    setName(data.name);
    reset();
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextField inputRef={register} id="name" name="name" helperText="Enter your name and press [Enter]" />
      </form>
      <div>
        {currentName && <div>Current: {currentName}</div>}
        {name && <div>Submitted: {name}</div>}
      </div>
    </>
  );
};

export default FinalTextField;
Enter fullscreen mode Exit fullscreen mode

React Hook Form provides several other options for form management. When paired with Material UI, constructing forms doesn't get much easier.

Are you using React Hook Form with Material UI? Let me know on Twitter.

Top comments (0)