React Masked Input
A lightweight Input masking
#Usage

There are a lot of type combination for using the modules. I shared some examples for using below.

- You have to know some things firstly.The module not allowed left twice space characters.

- You can use (#) for only numeric characters.

- You can use (a) for only string characters.

- You can use (*) for alphanumeric characters.

- If you want to use a space you can put the in mask combination.

- You can use all mask characters together.

- (*) (#) (a) All types that do not contain a are used as a separator.

- You can use conditional mask but you can not use regex instead a mask seperators. (any condition or regex value)

#Examples

Code Sample Phone Model with @mui/material TextField:


<MaskedInput
    label="Mix Types and Seperators"
    size={"x-large"}
    color={"warning"}
    fullWidth
    mask={"##-*a & ##-*#"}
    value={mixed || ""}
    onChange={setMixed}
>
<TextField></TextField>
</MaskedInput>

Result:

Code Sample Allowed only strings with @mui/material TextField:


    <MaskedInput
        label="Only String Characters"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"aa aa aa"}
        value={phone || ""}
        onChange={setPhone}
    >
        <TextField></TextField>
    </MaskedInput>

Result:

Code Sample Phone Model with @mui/material TextField:


    <MaskedInput
        label="Phone Number Example"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"+90 (###) ### ## ##"}
        value={phone || ""}
        onChange={setPhone}
    >
        <TextField></TextField>
    </MaskedInput>

Result:

Code Sample Credit Card with @mui/material TextField:


    <MaskedInput
        label="Credit Card Example"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"#### #### #### ####"}
        value={cc || ""}
        onChange={setCC}
    >
    <TextField></TextField>
    </MaskedInput>

Result:

Code Sample Time Model with @mui/material TextField:


    <MaskedInput
        label="Time Format"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"##:##"}
        value={time || ""}
        onChange={setTime}
    >
    <TextField></TextField>
    </MaskedInput>

Result:

Code Sample Date Time model @mui/material TextField:


    <MaskedInput
        label="Date Time Format"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"##/##/## ##:##"}
        value={dateTime || ""}
        onChange={setDateTime}
    >
    <TextField></TextField>
    </MaskedInput>

Result:

Code Sample include Static Value in Mask with @mui/material TextField:



    <MaskedInput
        label="Include Static Value"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"##/##/2023"}
        value={staticValue || ""}
        onChange={setStaticValue}
    >
    <TextField></TextField>
    </MaskedInput>

Result:

Code Sample Conditional Mask with @mui/material TextField:

...

const [conditionalMask, setConditonalMask] = React.useState("##");
const [conditionalValue, setConditionalValue] = React.useState("");

...

useEffect(() => {
    if (conditionalValue > 90) {
      setConditonalMask("## ##");
    }
  }, [conditionalValue]);

...

    <MaskedInput
        label="Conditional Mask"
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={conditionalMask}
        value={conditionalValue || ""}
        onChange={setConditionalValue}
    >
    <TextField></TextField>
    </MaskedInput>

*you can use for cc type or some types with conditionaly

Result:

Code Sample IBAN with @mui/material TextField:


    <MaskedInput
        label="IBAN for Turkei 26 Chars."
        size={"x-large"}
        color={"warning"}
        fullWidth
        mask={"TR## #### #### #### #### #### ##"}
        value={iban || ""}
        onChange={setIban}
    >
    <TextField></TextField>
    </MaskedInput>

*you can update the mask with your country iban starts characters

Result: