# @capcar/final-form-generator-mui

> use of final-form-generator with mui

Latest version **1.1.6** (published 2024-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @capcar/final-form-generator-mui
pnpm add @capcar/final-form-generator-mui
yarn add @capcar/final-form-generator-mui
bun add @capcar/final-form-generator-mui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2024-04-11 |
| First published | 2022-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 172.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Guillaume Bastianelli |
| Maintainers | fguillotcapcar, donatien_capcar, ronfroy |
| Keywords | final-form, react-final-form, yup, react, hook, tool, mui |

## Links

- npm: https://www.npmjs.com/package/@capcar/final-form-generator-mui
- Repository: https://github.com/Kyump/tools
- Homepage: https://github.com/Kyump/tools/tree/master/packages/final-form-generator-mui
- Issues: https://github.com/Kyump/tools/issues
- npm.io page: https://npm.io/package/@capcar/final-form-generator-mui

## Dependencies (1)

- [string-hash](https://npm.io/package/string-hash.md) ^1.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2024-04-11
- 1.1.5 — 2023-01-31
- 1.1.4 — 2022-09-16
- 1.1.3 — 2022-08-23
- 1.1.2 — 2022-08-22

## README

# Final Form Generator MUI

Final Form Generator MUI is an implementation of
[@capcar/final-form-generator](https://www.npmjs.com/package/@capcar/final-form-generator)
with [Material UI v4](https://material-ui.com/).

## Installation

You need some dependencies in order to use this package:

- [@capcar/final-form-generator](https://www.npmjs.com/package/@capcar/final-form-generator)
- [@material-ui/core](https://www.npmjs.com/package/@material-ui/core)
- [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons)
- [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles)

## Usage

Here a small [example](https://codesandbox.io/embed/kyumpfinal-form-generator-mui-example-5pwc2)

## API

### MuiForm

The main component of the package.

- fields - \$ReadOnlyArray<[FieldType](src/types.js#L97-L97)> (**required**) : Fields of the forms
- onSubmit - (values: Object) => any (**required**) : Submit callback of the form
- initialValues - Object : Initial values of the form
- columns - number : columns number of the form [grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- rows - number : rows number of the form [grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- renderSubmit - (params: [RenderSubmitParamsType](src/types.js#L101-L106)) => React\$Element : custom render for submit button
- preValidate - (values: Object) => {[string]: string} : Function than can be called before yup validation
- devMode - boolean: true to display erros and values of the form
- children - React\$Element: Children of the form
- customValidationSchema - Object: Yup base schema is you want to use noSortEdges for example.

```javascript
const customValidationSchema = Yup.object().shape({
	customer: Yup.object().shape({}, ['phone', 'email']),
});
```

Here, if you put validation on field customer.email or customer.phone it will be add to this shape.

- preValidate - (values: Object) => Object: Function than can be called before yup validation. It has the form values as param and should return an object with error message (`{[string]: string}`)

### useMuiFormGenerator

This hook is used to extends MuiForm in association with FormComponent.

- customDefaultValidation - (name: string) => ?Object (**required**): Function used to extend or override the validation
- fields - \$ReadOnlyArray<T> (**required**): The fields of the form
- customValidationSchema : cf [MuiForm](#L22-L22)
- preValidate : cf [MuiForm](README.md#L22-L22)
- customRenderInput - (params: {
  field: T,
  children?: Array<React$Node>,
    index: number,
}) => ?React$Node : Function used to extend or override MUI renderInput

### FormComponent

This component is used to extends MuiForm in association with FormComponent.

- decorators: Decorators for decorators props of [react-final-form](https://github.com/final-form/react-final-form) component
- dom: Inputs of the form (React\$Node[])
- validate: Validation function for validate props of [react-final-form](https://github.com/final-form/react-final-form) component
- onSubmit : cf [MuiForm](#L26-L26)
- initialValues : cf [MuiForm](#L27-L27)
- columns : cf [MuiForm](#L28-L28)
- rows : cf [MuiForm](#L29-L29)
- renderSubmit : cf [MuiForm](#L30-L30)
- devMode : cf [MuiForm](#L31-L31)
- children : cf [MuiForm](#L32-L32)

### Fields

[MuiForm](README.md#L22-l22) have [inputs](src/types.js#L18-L18) already implemented.

## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/@capcar/final-form-generator-mui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._