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.

Usage no npm install needed!

<script type="module">
  import materialHookForm from 'https://cdn.skypack.dev/material-hook-form';
</script>

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>
  );
}

[Demo]