react-number-format Showing Format On inserting value

June 2, 2023

I have used this package for the Phone Input format

import { PatternFormat } from 'react-number-format';

<PatternFormat 
   value={value} 
   className='form-control'   
   format="(###) ###-####" 
 />

Due to this format whenever I add any single value, The formatted value show in the input. before the value reaches there.

I want to show the value in This format but when the value reaches there,
when I have entered only a single value it should not show that ‘-‘ there.

I want something like below

This is the link to the npm package I am using:
https://s-yadav.github.io/react-number-format/docs/intro

>Solution :

You could build the pattern diffrent if the value reaches said length then change (empty space) for a - (dash)

import { PatternFormat } from 'react-number-format';

let pattern;
if (value.length >= 9) {
    pattern = "(###) ###-####";
} else {
    pattern = "(###) ### ####";
}

<PatternFormat 
   value={value} 
   className='form-control'   
   format={pattern} 
 />