# @mrii/react-form-builder

> library to easily build forms using react-hook-form, MUI & yup

Latest version **1.0.7** (published 2023-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mrii/react-form-builder
pnpm add @mrii/react-form-builder
yarn add @mrii/react-form-builder
bun add @mrii/react-form-builder
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-04-17 |
| First published | 2022-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 370.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Abd UlHameed Maree |
| Maintainers | abd-ulhameed-maree |
| Keywords | react, react-component, mui, material-ui, material design, yup, validation, form, forms, form-input, react-hook-form |

## Links

- npm: https://www.npmjs.com/package/@mrii/react-form-builder
- Repository: https://github.com/AbdUlHamedMaree/react-form-builder
- Homepage: https://github.com/AbdUlHamedMaree/react-form-builder.git
- Issues: https://github.com/AbdUlHamedMaree/react-form-builder/issues
- npm.io page: https://npm.io/package/@mrii/react-form-builder

## 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.0.7 (latest) — 2023-04-17
- 1.0.6 — 2023-04-09
- 1.0.5 — 2023-04-09
- 1.0.4 — 2023-04-09
- 1.0.3 — 2023-01-14
- 1.0.2 — 2023-01-11
- 1.0.1 — 2023-01-11
- 1.0.0 — 2023-01-08
- 0.2.2 — 2022-12-21
- 0.2.1 — 2022-10-01
- 0.2.0 — 2022-10-01
- 0.1.63 — 2022-09-30
- 0.1.62 — 2022-09-30
- 0.1.61 — 2022-04-23
- 0.1.6 — 2022-04-23
- … 15 more at https://npm.io/package/@mrii/react-form-builder/versions

## README

# @mrii/react-form-builder

library to easily build forms using react-hook-form, MUI & yup.

compatible with Next Js (for )

## Install

```sh
yarn add @mrii/react-form-builder

# or using npm

npm i @mrii/react-form-builder
```

## Basic Examples

### _Very simple form_:

```tsx
import { useCallback } from 'react';
import { FormBuilder, FormSubmitInput, TextInput } from '@mrii/react-form-builder';
import { Box } from '@mui/material';

const Form = () => {
  const onSubmit = useCallback(async values => {
    await new Promise(res => {
      setTimeout(res, 2000);
    });
    console.log({ values });
  }, []);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: 300, mx: 'auto' }}>
      <FormBuilder onSubmit={onSubmit} useFormProps={{ defaultValues: { title: '' } }}>
        <TextInput name='title' label='Title' />
        <FormSubmitInput size='large' variant='contained' sx={{ mt: 2 }}>
          Submit
        </FormSubmitInput>
      </FormBuilder>
    </Box>
  );
};
```

or using typescript

```tsx
import { useCallback } from 'react';
import { FormBuilder, FormSubmitInput, TextInput } from '@mrii/react-form-builder';
import { Box } from '@mui/material';
import { SubmitHandler } from 'react-hook-form';

type FormFields = {
  title: string;
};

const Form: React.FC = () => {
  const onSubmit = useCallback<SubmitHandler<FormFields>>(async values => {
    await new Promise(res => {
      setTimeout(res, 2000);
    });
    console.log({ values });
  }, []);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: 300, mx: 'auto' }}>
      <FormBuilder<FormFields>
        onSubmit={onSubmit}
        useFormProps={{ defaultValues: { title: '' } }}
      >
        <TextInput name='title' label='Title' />
        <FormSubmitInput size='large' variant='contained' sx={{ mt: 2 }}>
          Submit
        </FormSubmitInput>
      </FormBuilder>
    </Box>
  );
};
```

the result:

![simple form result](./docs/simple-form.png)

once you click submit the button will be in loading state while the `onSubmit` promise in pending:

![simple form result](./docs/simple-form-loading.png)

### _Basic form_:

```tsx
import { useCallback } from 'react';
import {
  DateInput,
  FormBuilder,
  FormSubmitInput,
  NumberInput,
  PasswordInput,
  TextInput,
} from '@mrii/react-form-builder';
import { Box } from '@mui/material';
import { SubmitHandler } from 'react-hook-form';
import { date, number, object, ref, Schema, string } from 'yup';
import { LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

type FormFields = {
  firstName: string;
  lastName?: string;
  email: string;
  salary: number;
  dateOfBirth: Date;
  password: string;
  repeatPassword: string;
};

const schema: Schema<FormFields> = object({
  firstName: string().required(),
  lastName: string().optional(),
  email: string().email().required(),
  salary: number().positive().required(),
  dateOfBirth: date().max(new Date()).required(),
  password: string().required(),
  repeatPassword: string()
    .equals([ref('password')], 'Passwords must match')
    .required(),
});

const defaultValues: FormFields = {
  firstName: '',
  lastName: '',
  email: '',
  salary: 0,
  dateOfBirth: new Date(),
  password: '',
  repeatPassword: '',
};

const Form: React.FC = () => {
  const onSubmit = useCallback<SubmitHandler<FormFields>>(async values => {
    await new Promise(res => {
      setTimeout(res, 2000);
    });
    console.log({ values });
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: 300, mx: 'auto' }}>
        <FormBuilder<FormFields>
          validation={schema}
          onSubmit={onSubmit}
          useFormProps={{
            defaultValues,
          }}
        >
          <TextInput
            name='firstName'
            label='First Name'
            variant='standard'
            margin='normal'
          />
          <TextInput name='lastName' label='Last Name' variant='filled' margin='normal' />
          <TextInput name='email' label='Email' variant='outlined' margin='normal' />
          <NumberInput name='salary' label='Salary' variant='outlined' margin='normal' />
          <DateInput
            name='dateOfBirth'
            label='Date of Birth'
            loadingTextFieldProps={{
              size: 'small',
              margin: 'normal',
            }}
          />
          <PasswordInput
            name='password'
            label='Password'
            variant='outlined'
            margin='normal'
          />
          <PasswordInput
            name='repeatPassword'
            label='Repeat Password'
            variant='outlined'
            margin='normal'
          />

          <FormSubmitInput size='large' variant='contained' sx={{ mt: 2 }}>
            Submit
          </FormSubmitInput>
        </FormBuilder>
      </Box>
    </LocalizationProvider>
  );
};
```

the result:

![Basic Form Example](./docs/basic-form.png)

---
_Source: https://npm.io/package/@mrii/react-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._