README
Material Hook Form
material-hook-form is a set of wrapper components that intergrate material ui form elements with react-hook-form v7. so you don't need waste your time anymore to intergrate material ui form elements with react-hook-form v7.
Install
npm i material-hook-form
Usage
import { useForm } from 'react-hook-form';
import { TextField } from 'material-hook-form'
import {Grid, Button, Link} from '@material-ui/core'
function App() {
const { control, handleSubmit } = useForm()
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
margin="normal"
label="email"
name="email"
control={control}
/>
<TextField
margin="normal"
name="password"
label="password"
type="password"
control={control}
/>
<Button
fullWidth
color="primary"
variant="contained"
type="submit"
loading={auth.loginLoading}
>
Login
</Button>
<Grid container style={{ marginTop: '1em' }}>
<Grid item xs>
<Link href="#" variant="body2">
Forget Your Password?
</Link>
</Grid>
<Grid item>
<Link onClick={() => navigate("auth.register")} style={{ cursor: 'pointer' }} variant="body2">
{"Sing Up"}
</Link>
</Grid>
</Grid>
</form>
);
}
You can use yup for validation schema as well
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { TextField, SelectField, RadioGroupField } from 'material-hook-form'
import { Grid, Button } from '@material-ui/core'
const schema = yup.object().shape({
title: yup
.string()
.required('title is required'),
categories: yup
.array()
.of(yup.number()),
status: yup
.string()
});
function App() {
const { control, handleSubmit } = useForm({ resolver: yupResolver(schema)})
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container>
<Grid lg={6} spacing={3} item container>
<Grid item lg={12}>
<TextField
name="title"
label="The Title"
control={control}
/>
</Grid>
<Grid item lg={12}>
<SelectField
name="categories"
label="The Categories"
control={control}
multiple
options={categories.map((c: any) => ({ label: c.title, value: c.id }))}
/>
</Grid>
</Grid>
<Grid item lg={12}>
<RadioGroupField
name="status"
label="The Status"
control={control}
options={[
{
label: 'Save as published',
value: 'publsihed'
},
{
label: 'Save as draft',
value: 'unpublsihed'
},
]}
/>
</Grid>
<Grid item lg={12}>
<Button
variant="contained"
color="primary"
type="submit"
>
Submit
</Button>
<Button
variant="contained"
color="secondary"
>
Cancel
</Button>
</Grid>
</Grid>
</form>
);
}
[]