# use-mui-rich-form

> Opinionated hook to work with forms in material-ui

Latest version **1.8.0-alpha.11** (published 2020-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-mui-rich-form
pnpm add use-mui-rich-form
yarn add use-mui-rich-form
bun add use-mui-rich-form
```

## 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.8.0-alpha.11 |
| Published | 2020-04-13 |
| First published | 2020-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 6 |
| Unpacked size | 922.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | gsouf |
| Maintainers | gsouf |

## Links

- npm: https://www.npmjs.com/package/use-mui-rich-form
- Repository: https://github.com/gsouf/use-mui-rich-form
- Homepage: https://github.com/gsouf/use-mui-rich-form#readme
- Issues: https://github.com/gsouf/use-mui-rich-form/issues
- npm.io page: https://npm.io/package/use-mui-rich-form

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) ^1.1.0
- [react](https://npm.io/package/react.md) ^16.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^5.2.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.8
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1

## Recent versions

- 1.8.0-alpha.11 (latest) — 2020-04-13
- 1.8.0-alpha.10 — 2020-04-12
- 1.8.0-alpha.9 — 2020-04-12
- 1.8.0-alpha.8 — 2020-04-12
- 1.8.0-alpha.7 — 2020-04-11
- 1.8.0-alpha.6 — 2020-04-11
- 1.8.0-alpha.5 — 2020-04-11
- 1.8.0-alpha.4 — 2020-04-11
- 1.8.0-alpha.3 — 2020-04-11
- 1.8.0-alpha.2 — 2020-04-11
- 1.8.0-alpha.1 — 2020-04-11
- 1.8.0-alpha — 2020-04-11
- 1.7.0 — 2020-04-11
- 1.6.2 — 2020-04-10
- 1.6.1 — 2020-04-10
- … 7 more at https://npm.io/package/use-mui-rich-form/versions

## README

# use-mui-rich-form

An opinionated react hook to make it easier to work with form stats (processing/success/failure)
with [material-ui](https://material-ui.com/) and [react-hook-forms](https://react-hook-form.com/)
and that features ready to use Mui components.

[![NPM](https://img.shields.io/npm/v/use-mui-rich-form.svg)](https://www.npmjs.com/package/use-mui-rich-form)

## Install

```bash
npm install --save use-mui-rich-form
```

## Usage

```jsx
import React from 'react';
import * as Mui from "@material-ui/core";
import { useMuiRichForm, Form, Field, CircularButton } from 'use-mui-rich-form';
import SaveIcon from "@material-ui/icons/Save";

const Example = () => {
  const richForm = useMuiRichForm();

  const onSubmit = async (values) => {
     richForm.setProcessing();
     try {
       await doStuff();
       richForm.setSuccess('stuff done');
     } catch (e) {
       console.error(e);
       richForm.setFailure('Something went wrong');
     }
  }

  return (
    <div>
      <Form richForm={richForm} onSubmit={onSubmit}>
        <Field error={richForm.error.someText}>
          <Miu.TextField id="some_text" label="Some Text" {...richForm.textField('someText', {required: true})} />
        </Field>

        <CircularButton {...richForm.submitButton()} icon={<SaveIcon />} />
        { richForm.success }
        { richForm.failure }
      </Form>
    </div>
  )
}
```

## License

MIT © [gsouf](https://github.com/gsouf)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

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