Optional character

[cezarsmpio]

There is a way to use a optional char?

Example: <MaskInput mask="(99) 9999-9999[9]" /> or <MaskInput mask="(99) 9999-9999{9}" /> or <MaskInput mask="(99) 9999-99999?" />

Thanks!

[sanniassin]

Don't understand. How should optional char act?

[cezarsmpio]

For example, in Brazil, some states have the phone number with one digit more. While some have 8 digits, others have 9 digits.

[cezarsmpio]

Hi @sanniassin, any progress?

Thanks! :)

[sanniassin]

@CezarLuiz0 Pretty busy right now, so this project temporarily abandoned :)

[cezarsmpio]

Can I fork this project and send pull requests with new features?

Thanks!

[sanniassin]

Sure, but i will not be able to review and test PR for a while.

[deser]

Hi guys! Is there any progress on this feature?

[dapi]

I can do it for 100$ )

[deser]

Ok, please do it then)

[dapi]

Have done. Just use this configuration:

<Input 
  mask="(99) 9999-99999?"
  formatChars={
    "9": "[0-9]",
    "?": "[0-9]"
  }
 />

[deser]

Thank you!)

[eliseumds]

Guys, is this issue solved?

[cezarsmpio]

Not yet :/

[dapi]

Does not last solution fit?

[leaopedro]

Hey guys, how is this issue?

[mquandalle]

Does anyone has a solution to have a formatted input for currencies, like USD 1,000?

[deser]

There is Intl standard. You can use react Intl as well

[mquandalle]

Sure, but the difficult part is to have an <input> that auto-format the number as the user types it. Like autoNumeric in the jQuery world.

[sashashakun]

@mquandalle I use http://numeraljs.com/ for this solving this task

[alymenbr]

Hi guys,

I had the same problem with the different formatted phone numbers. I solved using a mask like this:

<InputElement
    mask="(99) 9999tt999?" 
    formatChars={{"9": "[0-9]", "t": "[0-9\-]", "?": "[0-9 ]"}} 
    maskChar={null} />

Now both formats are accepted. As there is no placeholder character, it looks fine for the user.

[kaueburiti]

Great solution, @alymenbr! But i don't think that the issue is solved, because all this solutions are just "work arounds" for a feature that does no exists.

[dkouk]

Hi guys, I have a issue with creating mask for zipcode US, as some 5 digits, and some have 9 digits, I try to make a "work around" like this : mask="99999?????" formatChars={{ 9: '[0-9]', '?': '[-\0-9]' }} but not working correctly, is there any suggestion ?

[andredovale]

For controlled inputs:

handlerChangeBrazilianPhone = (ev) => {
  const brazilianPhone = ev.target.value.replace(/[^0-9]+/g, '')
  this.setState({ brazilianPhone })
}
...
mask={this.state.brazilianPhone.length <= 10 ? '(99) 9999-9999?' : '(99) 99999-9999'}
formatChars={{ 9: '[0-9]', '?': '[0-9 ]' }}
onChange={this.handlerChangeBrazilianPhone}
value={this.state.brazilianPhone}

[sanniassin]

@dkouk Could you take a look at the master branch? It has new beforeChange property and example with your case.

[nagapriyanka93]

is there a way to achieve this inputmask("9{2,3}/9{2,3}").inputmask("option", {tabThrough: true}) using input mask in react? I am looking to use a mask where i can enter 2 or 3 numbers before / if i enter 2 numbers ( e.g 12_/___)and press tab it should take me to the second portion after /.

Any help is highly appreciated.

[Abhishek-Palapi]

hi i want react mask for values 1 to 100 i am using "99%" mask but its not taking the 100 value i want to include the 100 max value also

[fiuzagr]

import React, { useState } from 'react';
import InputMask from 'react-input-mask';
import { trim, size } from 'lodash';

const PhoneInput = ({ className, ...props }) => {
  const [mask, setMask] = useState('(99) 99999-9999');

  return (
    <InputMask
      {...props}
      mask={mask}
      onBlur={e => {
        if (size(trim(e.target.value, '_')) === 14) {
          setMask('(99) 9999-9999');
        }
      }}
      onFocus={e => {
        if (size(trim(e.target.value, '_')) === 14) {
          setMask('(99) 99999-9999');
        }
      }}
    >
      {inputProps => (<input {...inputProps} type="tel" />)}
    </InputMask>
  );
};

[cescoferraro]

to whoever falls here searching for an react-number-format solution

          const s = values.phone
            .split(" ")
            .join("")
            .split(")")
            .join("")
            .split("(")
            .join("")
            .split("-")
            .join("")
            .split("_")
            .join("")

format={s.length < 11 ? "(##) ####-#####" : "(##) #####-####"}
mask={s.length < 10 ? "_" : ""}

[hugosbg]

I did like this

with: react-input-mask: ^2.0.4

import React from "react";
import InputMask, { InputState } from "react-input-mask";
import { TextField } from "@material-ui/core";

function PhoneMask() {
  const beforeMaskedValueChange = (newState: InputState) => {
    let { value } = newState;

    const newValue = value.replace(/\D/g, "");
    if (newValue.length === 11) {
      value = newValue.replace(/^(\d{2})(\d{5})(\d{4})$/, "($1) $2-$3");
    }

    return {
      ...newState,
      value
    };
  };

  return (
    <InputMask mask="(99) 9999-99999" maskChar={null} beforeMaskedValueChange={beforeMaskedValueChange}>
      {(props: any) => <TextField {...props} fullWidth label="Phone" name="phone" />}
    </InputMask>
  );
};

[marlosirapuan]

perfect, @hugosbg 👌 thank you.

[optimus-informatica]

const phoneMask = '+55 (99) 9999-9999'; const celphoneMask = '+55 (99) 99999-9999'; const [mask, setMask] = useState(phoneMask);

const changeMask = (e) => { if (/^\+([0-9]+) \(([0-9]+)\) 9/.test(e.target.value)) { if (mask !== celphoneMask) { setMask(celphoneMask); } } else if (mask != phoneMask) { setMask(phoneMask); } } <ImputMask mask={mask} maskChar="_" onChange={changeMask}>

[bianchi]

I made it work on version 3, alpha 2. I'm using material UI and typescript. For anyone interested.

https://codesandbox.io/s/confident-bird-fek84?fontsize=14&hidenavigation=1&theme=dark

[jvmendesavila]

No meu caso funcionou da seguinte maneira:

mask={ formik.values.phone.length > 14 ? '(99) 99999-9999' : '(99) 9999-99999' }

espero que ajude 🙏

[alanddos]

Deu certo assim aqui <TextField error={touched.number && Boolean(errors.number)} helperText={touched.number && errors.number} label={i18n.t("contactModal.form.number")} name="number" variant="outlined" margin="dense" onKeyUp={e => { if (e.target.value.replace(/\D/g, "").length === 10) { let x = e.target.value.replace(/\D/g, "").match(/(\d{0,2})(\d{0,4})(\d{0,4})/); e.target.value = !x[2] ? x[1] : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : ""); } else { let x = e.target.value.replace(/\D/g, "").match(/(\d{0,2})(\d{0,1})(\d{0,4})(\d{0,4})/); e.target.value = !x[2] ? x[1] : "(" + x[1] + ") " + x[2] + " " + x[3] + (x[4] ? "-" + x[4] : ""); } }} />

[fernandogatto]

Hi guys, I used InputMask from react-input-mask and TextField from @material-ui/core and it works that way:

const [inputTextData, setInputTextData] = useState({
    celular: '',
});`

const handleInputTextChange = (event) => {
    const { name, value } = event.target;

    setInputTextData({...inputTextData, [name]: value});
} 

<InputMask
    mask={inputTextData.celular.length > 14 ? "(99) 99999-9999" : "(99) 9999-99999"}
    maskChar=""
    value={inputTextData.celular}
    onChange={handleInputTextChange}
>
    {() => (
        <TextField
            variant="outlined"
            type="tel"
            label="Celular"
            name="celular"
        />
      )}
</InputMask> 

Attention to the second condition on prop mask. It must be have 15 characters to can pass to the first condition.

[eeebuba]

mask={watch('phone')!.charAt(5) === '9' ? '(99) 9 9999-9999' : '(99) 9999-9999'} doesn't this work too? (using with react-hook-form)

[leoburn5]

Have done. Just use this configuration:

<Input 
  mask="(99) 9999-99999?"
  formatChars={
    "9": "[0-9]",
    "?": "[0-9]"
  }
 />

This solution does not solve the issue.

Unfortunately the presented mask is not correct, because is the first digit after the area code that should be optional.

Also, the five digit sequence is bad for reading.

A good solution would be using for instance "9" for mandatory positions and "0" for optional positions or vice versa like this:

(99) 0 9999-9999, with the empty mask like this (__) _ ____-____

The spaces around the optional digit should make the value easyer to read.

This package seems to be dead, will search for other options