Quickly build powerful forms using Material UI and React Hook Form

Installation

mui-rhf is available as an npm package.

// with npm
npm install mui-rhf

// with yarn
yarn add mui-rhf

Usage

import React from 'react';

import { useForm } from "react-hook-form";
import { MuiRhfForm } from "mui-rhf";
import { Button } from "@material-ui/core";

const Form = ({ onSubmit }) => {
  // Initialize form
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // Play with retrieved data
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <MuiRhfForm
        control={control}
        fields={[
          [{ name: "firstName" }, { name: "lastName" }],
          [{ name: "email" }],
          [{ name: "rememberMe", type: "checkbox" }]
        ]}
      />
      <Button type="submit">
        Submit
      </Button>
    </form>
  )
};

Type

MuiRhfFormProps

These are props that you pass to <MuiRhfForm />

fields: MuiRhfFormField[][];

Fields to construct the form

type MuiRhfFormField = {
  name: string;
  label?: string;
  props?: any;
  type?: keyof MuiRhfFieldComponentMap;
  gridProps?: Pick<GridProps, "xs" | "sm" | "md" | "lg" | "xl">;
  hideCondition?: MuiRhfFormFieldHideConditions; // Union of conditions, if true, field will be hidden
  hideConditions?: MuiRhfFormFieldHideConditions; // Intersection of conditions, if true, field will be hidden
  conditionalProps?: MuiRhfFormFieldConditionalProps; // Extra props applied depending on other form fields values
};

headers?: MuiRhfFormHeader[];

An array of titles

type MuiRhfFormHeader = {
  title?: string;
};

spacing?: GridSpacing;

Spacing applied to main Grid container

watch?: RhfWatch;

Provided by React Hook Form

control: Control;

Provided by React Hook Form

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind welcome!