use-input-text-mask

useTextMask

Installation

Yarn

yarn add use-input-text-mask

NPM

npm install use-input-text-mask

---

Then, require it and use it.

import React from 'react'
import { useInputTextMask } from 'use-input-text-mask';

export default () => {
  const mask = ['+', '1', ' ', '(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

  const { ref: inputRef, onChange } = useInputTextMask({ mask });
  
  return (
    <div>
      <input ref={inputRef} type="tel" onChange={onChange} />
    </div>
  )
}

Example

To see an example of the code running, follow these steps:

1. Clone the repo, git clone https://github.com/awen2841/use-input-text-mask.git
2. cd use-input-text-mask/exemple
3. npm install
4. npm run storybook
5. Open http://localhost:6006

The code of the example is in exemple.