react-input-mask-hook

react-input-mask-hook

React hook for connecting to the input of a strict/non-strict mask.

Installation

npm i react-input-mask-hook

Parameters

Passes an object with properties as input:

Name	Required	Type	Description
inputRef	+	RefObject	Ref connected to the input element.
mask	+	string	Mask with which the user interacts.
replace	+	Object key: RegExp value: RegExp	Key - regular expression. Which characters in the mask the user can edit. Value - regular expression. Those values that you can change the key to.
strict	-	boolean	Determines whether the mask is strict or not.
pattern	-	string	To check if a mask matches a regular expression input.pattern.

Return value

Hook returns an object with the following properties:

Name	Type	Description
value	string	Value from input.
error	string	Error text from input.validationMessage
isValid	boolean	Indicates whether the mask matches the pattern.
onChange	function	onChange handler.

Example

• Input type must be equal to text.
• The strict: true is transmitted if the number of characters in the mask is unchanged. For example, phone, ip address or your custom mask.
• The pattern is passed if you want to use isValid and error.

Strict mask

  const inputRef = useRef<HTMLInputElement>(null);
  const { value, onChange } = useMask({
    inputRef: inputRef,
    mask: "[phone]",
    replace: {
      key: /\d/,
      value: /\d/,
    },
    strict: true,
  });

  return (
    <label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        ref={inputRef}
      />
    </label>
  );

In this example, it makes sense to add a pattern for validation, since some characters may be equal to "_".

  const inputRef = useRef<HTMLInputElement>(null);
  const { value, onChange, error, isValid } = useMask({
    inputRef: inputRef,
    mask: "+7 (___) ___-__-__",
    replace: {
      key: /_/,
      value: /\d/,
    },
    strict: true,
    pattern: '\\+\\d\\s\\([\\d]{3}\\)\\s[\\d]{3}-\\d\\d-\\d\\d',
  });

  return (
    <label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        ref={inputRef}
      />
      <span>{error}</span>
    </label>
  );

Non-strict mask

  const inputRef = React.useRef<HTMLInputElement>(null);
  const { value, onChange, error, isValid } = useMask({
    inputRef: inputRef,
    mask: '[e-mail]',
    replace: {
      key: /[a-z]/i,
      value: /[a-z]/i,
    },
    pattern: '[a-z]+@[a-z]+\\.(ru|com)'
  });

  return (
    <label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        ref={inputRef}
      />
      <span>{error}</span>
    </label>
  );

  const inputRef = React.useRef<HTMLInputElement>(null);
  const { value, onChange, error, isValid } = useMask({
    inputRef: inputRef,
    mask: 'http://*.com',
    replace: {
      key: /\*/,
      value: /[a-z]/,
    },
    pattern: 'http:\\/\\/[a-z]+\\.com'
  });

  return (
    <label>
      <input
        type="text"
        value={value}
        onChange={onChange}
        ref={inputRef}
      />
      <span>{error}</span>
    </label>
  );