# js-mui-formik

> TextFields Material UI with Formik and masks

Latest version **1.5.6** (published 2023-10-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install js-mui-formik
pnpm add js-mui-formik
yarn add js-mui-formik
bun add js-mui-formik
```

## 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.5.6 |
| Published | 2023-10-02 |
| First published | 2023-09-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Julio Silva |
| Maintainers | juliosilvacwb |
| Keywords | material, ui, formik, mask |

## Links

- npm: https://www.npmjs.com/package/js-mui-formik
- Repository: https://github.com/juliosilvacwb/js-mui-formik
- Homepage: https://github.com/juliosilvacwb/js-mui-formik#readme
- Issues: https://github.com/juliosilvacwb/js-mui-formik/issues
- npm.io page: https://npm.io/package/js-mui-formik

## Dependencies (6)

- [formik](https://npm.io/package/formik.md) ^2.4.5
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.11
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [react-text-mask](https://npm.io/package/react-text-mask.md) ^5.5.0
- [@types/react-text-mask](https://npm.io/package/@types/react-text-mask.md) ^5.4.12

## 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.5.6 (latest) — 2023-10-02
- 1.5.5 — 2023-09-29
- 1.5.4 — 2023-09-29
- 1.5.3 — 2023-09-28
- 1.5.2 — 2023-09-28
- 1.5.1 — 2023-09-28
- 1.5.0 — 2023-09-28
- 1.3.8 — 2023-09-27
- 1.3.7 — 2023-09-27
- 1.3.4 — 2023-09-27
- 1.3.2 — 2023-09-27
- 1.3.0 — 2023-09-27
- 1.2.0 — 2023-09-27
- 1.1.0 — 2023-09-27
- 1.0.0 — 2023-09-26

## README

# js-mui-formik
material ui mui formik mask

### How to use

```js
import { useFormik } from 'formik';
import { FormikMuiTextField} from 'js-mui-formik'
import { useState } from 'react';
import * as yup from 'yup';


export default function App() {

    const validationSchema = yup.object({
        name: yup.string().required('Please enter name').min(2, "Name too short")
    });

    const [name, setName] = useState<string>("");

    const formik = useFormik({
        initialValues: {name},
        enableReinitialize: true,
        validationSchema: validationSchema,
        onSubmit: (values, formikHelpers) => {
            setName(() => values.name);
            formikHelpers.resetForm();
        },
    });

  return (
    <div>
        <h1>Hello {name} </h1>
        <form onSubmit={formik.handleSubmit}>
            <FormikMuiTextField name="name" label="Name" formik={formik}/>
            <button type="submit">Submit</button>
        </form>
    </div>
  )
} 

```

### Use input with mask
```js
import { useFormik } from 'formik';
import { FormikMuiMaskedTextField, FormikMuiTextField } from 'js-mui-formik'
import { BR_MOBILE_MASK, BR_PHONE_MASK } from 'js-mui-formik'
import { useState } from 'react';
import styled from 'styled-components';
import * as yup from 'yup';

const InputWrapper = styled.div`margin: 1rem 0`;

class User {
  name: string;
  phone: string;
  mobile: string;

  constructor() {
    this.name = "";
    this.phone = "";
    this.mobile = "";
  }
}

export default function ShowInputs() {

  const validationSchema = yup.object({
    name: yup.string().required('Please enter name').min(2, "Name too short"),
    phone: yup.string().required('Please enter phone').min(11, "Phone too short"),
    mobile: yup.string().required('Please enter mobile').min(12, "Phone too short")

  });

  const [user, setUser] = useState<User>(new User);

  const formik = useFormik({
    initialValues: { ...user },
    enableReinitialize: true,
    validationSchema: validationSchema,
    validateOnMount: true,
    onSubmit: (values, formikHelpers) => {
      setUser(() => values);
      formikHelpers.resetForm();
    },
  });

  return (
    <div>
      <h1>
        Hello {user?.name ? user?.name : '______'},&nbsp;
        your phone is {user?.phone ? user?.phone : '_____'}&nbsp;
        and your mobile is {user?.mobile ? user?.mobile : '_____'}.
      </h1>
      <form onSubmit={formik.handleSubmit}>
        <InputWrapper>
          <FormikMuiTextField
            name="name"
            label="Name"
            placeholder='Enter with your name'
            formik={formik} />
        </InputWrapper>
        <InputWrapper>
          <FormikMuiMaskedTextField
            id="phone"
            name="phone"
            mask={BR_PHONE_MASK}
            alternativeMask={BR_MOBILE_MASK}
            testAlternativeMask={(value: string) => value.replace(/\D/g, '')[2] === '9'}
            label="Phone"
            formik={formik} />
        </InputWrapper>
        <InputWrapper>
          <FormikMuiMaskedTextField
            id="mobile"
            name="mobile"
            mask={BR_MOBILE_MASK}
            label="Mobile"
            formik={formik} />
        </InputWrapper>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}
```

### Available masks

- BR_PHONE_MASK = ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
- BR_MOBILE_MASK= ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
- BR_CEP_MASK = [/\d/, /\d/,'.', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
- BR_CNPJ_MASK = [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/,'/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
- BR_CPF_MASK = [/\d/, /\d/, /\d/,'.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/,'-', /\d/, /\d/];
- TEST_BR_MOBILE_MASK = (value: string) => value.replace(/\D/g, '')[2] === '9'

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