InputPhone

1interface IInputPhoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
2  onChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
3  countryCode: string; //default: '+7'
4  countryCodeCSS?: SerializedStyles;
5  mask?: string; // default: '(999) 999-99-99';
6  ref: React.Ref<HTMLInputElement>;
7}

1import { InputPhone } from 'neutrino-ui';
2
3const phoneStyle = css({
4  height: 48,
5  borderRadius: 4,
6  width: 250,
7  fontSize: 16,
8  outline: 0,
9  border: '1px #ababab solid',
10  '&:hover, &:focus': {
11    border: '1px #0ed308 solid',
12  },
13});
14
15const [phone, setPhone] = useState('');
16
17const handleChangePhone = (phone: string) => {
18  setPhone(phone);
19};
20
21<InputPhone
22  name="phoneNumber"
23  countryCode="+7"
24  css={phoneStyle}
25  onChange={handleChangePhone}
26  value={phone}
27  placeholder="(___) ___-__-__"
28/>