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