mui-easy-form

Combine Material UI and React Hook Form

Features

• typescript support
• native support with material-ui & react-hook-form
• extend material-ui components
• provide uncontrolled & controlled components

Install

• npm install mui-easy-form
• yarn add mui-easy-form
• pnpm install mui-easy-form

QuickStart

import { Button } from '@mui/material'

type User = {
  id: string
  name: {
    first: string
    last: string
  }
}

function App() {
  const { handleSubmit, control } = useForm<User>()
  return (
    <form
      noValidate
      onSubmit={handleSubmit((data) => {
        console.log(data)
      })}
    >
      <TextField<Shape>
        control={control}
        label="text"
        required
        name="name.first"
      />
      <Button type="submit">submit</Button>
    </form>
  )
}

Documentation

demo

Component List

• [x] word
• [x] password
• [x] number

TODO

• [ ] codesandbox
• [ ] i18n
• [ ] reduce size
• [ ] FAQ: "XXIO" difference with "XXField"?
• [ ] eslint