Skip to content

Commit

Permalink
Improve README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
clement-faure committed Mar 28, 2021
1 parent d88c7d1 commit 1f4d370
Showing 1 changed file with 66 additions and 5 deletions.
71 changes: 66 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,87 @@ yarn add mui-rhf
import * as React from 'react';
import { useForm } from "react-hook-form";
import { MuiRhfTextField, MuiRhfSelect, MuiRhfCheckbox, MuiRhfAutocomplete } from "mui-rhf";
import { MuiRhfForm } from "mui-rhf";
import { Button } from "@material-ui/core";
const Form = ({ onSubmit }) => {
// Initialize form
const { control, errors } = useForm();
const { control, errors, handleSubmit } = useForm();
const onSubmit = (data) => {
// Play with retrieved data
}
return (
<form onSubmit={handleSubmit(onSubmit)} onValidate>
<MuiRhfTextField
<form onSubmit={handleSubmit(onSubmit)} noValidate>
<MuiRhfForm
control={control}
errors={errors}
name="email"
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">;
condition?: MuiRhfFormFieldCondition; // Union of conditions
conditions?: MuiRhfFormFieldCondition; // Intersection of conditions
conditionalProps?: MuiRhfFormFieldConditionalProps; // Props applied when condition is satisfied
};
```

#### 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](https://react-hook-form.com/api#watch)

#### control: Control;

Provided by [React Hook Form](https://react-hook-form.com/api#control)

#### errors: FieldErrors;

Provided by [React Hook Form](https://react-hook-form.com/api#errors)

## Contributors ✨

This project follows the
Expand Down

0 comments on commit 1f4d370

Please sign in to comment.