Skip to content

Commit bf60c44

Browse files
Update README.md
1 parent 28879fa commit bf60c44

1 file changed

Lines changed: 0 additions & 101 deletions

File tree

README.md

Lines changed: 0 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -7604,107 +7604,6 @@ export default function App() {
76047604
<b><a href="#table-of-contents">↥ back to top</a></b>
76057605
</div>
76067606
7607-
## Q. How to use react hook form with material-ui?
7608-
7609-
**React Hook Form:**
7610-
7611-
React Hook Form is a library for managing form state and validation in React with minimal re-renders. Use React Hook Form with MUI by wiring MUI inputs through Controller (or register for simple native inputs), then handling submit with handleSubmit.
7612-
7613-
**Install:**
7614-
7615-
```js
7616-
npm i react-hook-form @mui/material @emotion/react @emotion/styled
7617-
```
7618-
7619-
**Example:**
7620-
7621-
{% raw %}
7622-
```js
7623-
/**
7624-
* React Hook Form with MUI
7625-
*/
7626-
import { useForm, Controller, SubmitHandler } from "react-hook-form";
7627-
import { TextField, Button, Stack } from "@mui/material";
7628-
7629-
type FormValues = {
7630-
name: string;
7631-
email: string;
7632-
};
7633-
7634-
export default function SignupForm() {
7635-
const {
7636-
control,
7637-
handleSubmit,
7638-
formState: { errors, isSubmitting }
7639-
} = useForm<FormValues>({
7640-
defaultValues: {
7641-
name: "",
7642-
email: ""
7643-
},
7644-
mode: "onBlur"
7645-
});
7646-
7647-
const onSubmit: SubmitHandler<FormValues> = async (data) => {
7648-
console.log("Form data:", data);
7649-
// await apiCall(data)
7650-
};
7651-
7652-
return (
7653-
<form onSubmit={handleSubmit(onSubmit)} noValidate>
7654-
<Stack spacing={2} sx={{ maxWidth: 420 }}>
7655-
<Controller
7656-
name="name"
7657-
control={control}
7658-
rules={{ required: "Name is required" }}
7659-
render={({ field }) => (
7660-
<TextField
7661-
{...field}
7662-
label="Name"
7663-
error={!!errors.name}
7664-
helperText={errors.name?.message}
7665-
fullWidth
7666-
/>
7667-
)}
7668-
/>
7669-
7670-
<Controller
7671-
name="email"
7672-
control={control}
7673-
rules={{
7674-
required: "Email is required",
7675-
pattern: {
7676-
value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
7677-
message: "Enter a valid email"
7678-
}
7679-
}}
7680-
render={({ field }) => (
7681-
<TextField
7682-
{...field}
7683-
label="Email"
7684-
type="email"
7685-
error={!!errors.email}
7686-
helperText={errors.email?.message}
7687-
fullWidth
7688-
/>
7689-
)}
7690-
/>
7691-
7692-
<Button type="submit" variant="contained" disabled={isSubmitting}>
7693-
Submit
7694-
</Button>
7695-
</Stack>
7696-
</form>
7697-
);
7698-
}
7699-
```
7700-
{% endraw %}
7701-
7702-
**&#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/react-hook-form-dc8m7)**
7703-
7704-
<div align="right">
7705-
<b><a href="#table-of-contents">↥ back to top</a></b>
7706-
</div>
7707-
77087607
## Q. Why You Should Choose React Hook Form Over Formik and Redux-Form?
77097608
77107609
Below are the main reasons to recommend **React Hook Form** Over Formik and Redux-Form,

0 commit comments

Comments
 (0)