This is a test task from a job interview, which was allocated 30 minutes of live coding. Maybe this example will be useful for someone to start a more advanced component or you can use it as is.
Component API
interface FormattedInputProps {
label: string;
value: string;
mask: string;
placeholder: string;
errorMessage: string;
parser?: (str: string | null | undefined) => string;
formatter?: (str: string, mask: string) => string;
onChange: (str: string) => void;
}Mask format
^ - upercase character
_ - lowercase character
# - number
Example:
import {useState} from 'react';
import {defaultParser, defaultFormatter, FormattedInput} from 'react-fmt-input';
const Demo = () => {
const [phone, setPhone] = useState<string>("");
return (
<FormattedInput
label="Phone"
value={phone}
mask="+# (###) ###-##-##"
placeholder="+7 (999) 123-45-67"
errorMessage="Invalid number"
onChange={setPhone}
parser={defaultParser} // optional
formatter={defaultFormatter} // optional
/>
)
};Demo project
https://github.com/kobzarvs/formatted-input-demo