Use-mui-rich-form NPM

use-mui-rich-form

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

Install

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

Usage

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>
  )
}