CODEWITHSUNDEEP
reactjstypescriptnext.jsimaskjs
Bryan Lima
Bryan Lima

Reputation: 1

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

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} />;
};

Upvotes: 0

Views: 3556

Answers (1)

brc-dd
brc-dd

Reputation: 12964

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:

Open in StackBlitz

Upvotes: 2

Related Questions