Input Mask

GitHub

Установка

yarn add react-imask

Настройка

./components/_forms/InputMask.tsx

'use client'

import { useRef } from 'react';
import { IMaskInput } from 'react-imask';


export default function InputMask() {
  const ref = useRef(null);
  const inputRef = useRef(null);

  return (
    <>
      <label
        htmlFor="UserEmail"
        className="relative block overflow-hidden rounded-md border border-gray-200 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
      >
        <IMaskInput
          mask={'+{7}(000)000-00-00'}
          radix="."
          value="."
          unmask={true} // true|false|'typed'
          ref={ref}
          inputRef={inputRef}  // access to nested input
          // DO NOT USE onChange TO HANDLE CHANGES!
          // USE onAccept INSTEAD
          onAccept={
            // depending on prop above first argument is
            // `value` if `unmask=false`,
            // `unmaskedValue` if `unmask=true`,
            // `typedValue` if `unmask='typed'`
            (value, mask) => console.log(value)
          }
          // ...and more mask props in a guide

          // input props also available
          placeholder='Мобильный телефон'
          type='tel'
          id='UserEmail'
          className="peer h-12 w-full border-none bg-transparent p-0 placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0 px-3 pt-3"
          autoFocus
        />
        <span className="absolute start-3 top-3 -translate-y-1/2 text-gray-400 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base text-xs peer-focus:text-xs peer-focus:text-light-primary peer-focus:top-3">
          {placeholder}
        </span>
      </label>
    </>
  )
}