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:

Return value

Hook returns an _object_ with the following properties:

Example

1. Input type must be equal to _text_.
2. The _strict: true_ is transmitted if the number of characters in the mask is unchanged. For example, phone, ip address or your custom mask.
3. The _pattern_ is passed if you want to use _isValid_ and _error_.

$3

``
const inputRef = useRef(null);
const { value, onChange } = useMask({
inputRef: inputRef,
mask: "+7 (123) 123-12-13",
replace: {
key: /\d/,
value: /\d/,
},
strict: true,
});

return (

type="text"
value={value}
onChange={onChange}
ref={inputRef}
/>

);
`

---

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

`
const inputRef = useRef(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 (

type="text"
value={value}
onChange={onChange}
ref={inputRef}
/>
{error}

);
`

$3

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

return (

type="text"
value={value}
onChange={onChange}
ref={inputRef}
/>
{error}

);
`

---

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

return (

type="text"
value={value}
onChange={onChange}
ref={inputRef}
/>
{error}

);
``