🔥 input-mask-react

In an extremely simple way, apply input masks to your React project.

🚀 About

input-mask-react is a package for react that was created with the purpose of facilitating software development. Applying input masks is a common and often repetitive task, come to think of it, input-mask-react makes this process simpler for you.

🛠 Get Started

install the input-mask-react

npm install input-mask-react

Import the package

import { InputMask } from 'input-mask-react'

Example of use

The example below shows how to create a Brazilian phone mask. See that for the mask to be applied, inform the index and which character you want to add, and that's it, now you have an input mask!

function App() {
  const inputRef = useRef(null)

  return (
    <InputMask
      ref={inputRef}
      maxLength={19}
      placeholder='+55 (12) 98765-4321'
      cb={(event) => console.log(event)}
      masks={[
        { index: 0, character: '+' },
        { index: 3, character: ' ' },
        { index: 4, character: '(' },
        { index: 7, character: ')' },
        { index: 8, character: ' ' },
        { index: 14, character: '-' },
      ]}
    />
  )
}

export default App

Description of properties

Note: The character field only accepts characters, and only one per index.