how to have 8 or 9 digit + DDD phone mask using react imask?

Question

I'm using lib react imask to add mask to my inputs. In case of phone, it can support numbers with 8 or 9 digits. How can I resolve this dynamically?

8 digits -> mask '(00) 0000-0000'
9 digits -> mask '(00) 00000-0000'

const mask = {
  mask: '(00) 00000-0000'
};

const InputPhone: React.FC<InputProps> = (props) => {
  return <InputMask maskParams={mask} name='phone' {...props} />;
};

my input already accepts 8 or 9 digits. I just want to change the mask depending on the number of digits. — Bryan Lima, Dec 26 '21 at 14:59

score 2 · Answer 1 · answered Dec 26 '21 at 15:12

2

Refer this: https://imask.js.org/guide.html#masked-dynamic

import { IMaskInput } from 'react-imask';

const mask = [{ mask: '(00) 0000-0000' }, { mask: '(00) 00000-0000' }];

const Home = () => (
  <IMaskInput mask={mask} name="phone" placeholder="Enter phone number here" />
);

export default Home;

Output:

answered Dec 26 '21 at 15:12

brc-dd

10,788
3
47
67

thanks my friend, but it doesn't work in typescrit – Bryan Lima Dec 26 '21 at 23:34
1

@BryanLima That's because their types are completely useless https://cdn.jsdelivr.net/npm/react-imask@6.2.2/dist/input.d.ts. Create an issue on their github (PS: actually there are already - https://github.com/uNmAnNeR/imaskjs/issues/554, https://github.com/uNmAnNeR/imaskjs/issues/581). You need to manually override types meanwhile or use an ignore comment. – brc-dd Dec 27 '21 at 07:27

how to have 8 or 9 digit + DDD phone mask using react imask?

1 Answers1