@nafuzi/brazilian-masks
TypeScript icon, indicating that this package has built-in type declarations

1.8.3 • Public • Published

Brazilian Masks

Some masks commonly used in forms in Brazil

Available Masks

  • phone (dynamically changes)
  • cnpj
  • cpf
  • cpfOrCnpj (dynamically changes)
  • cep
  • pis

Utility functions

  • clear (remove all non-numeric characters)

Installation

npm i @nafuzi/brazilian-masks

or

yarn add @nafuzi/brazilian-masks

Simple use (Vanilla JS)

import { clear, cep } from '@nafuzi/brazilian-masks'

const cepInput = document.getElementById('cep-input')

cepInput.addEventListener('input', (event) => {
  const { value } = event.target

  cepInput.value = cep(value)
})

React (TypeScript)

// MaskedInput.tsx
import { ChangeEvent, HTMLProps } from 'react'
import masks, { MasksName } from '@nafuzi/brazilian-masks'

type MaskedInputProps = {
  mask: MasksName
  onChange: (maskedValue: string) => void
} & Omit<HTMLProps<HTMLInputElement>, 'onChange'>

export const MaskedInput = ({
  name,
  value,
  onChange,
  mask,
  ...rest
}: MaskedInputProps) => {
  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
    const maskedValue = masks[mask](event.target.value)

    onChange(maskedValue)
  }

  return <input onChange={handleOnChange} value={value} {...rest} />
}

// App.tsx
import { useState } from 'react'

import { MaskedInput } from './components/MaskedInput'

const App = () => {
  const [cpf, setCpf] = useState('')

  return (
    <MaskedInput
      name="cpf"
      value={cpf}
      onChange={(value) => setCpf(value)}
      mask="cpf"
    />
  )
}

export default App

Contributing

Feel free to create issues and open PR's with features, improvements, bugfix, etc.

License

MIT

Package Sidebar

Install

npm i @nafuzi/brazilian-masks

Weekly Downloads

18

Version

1.8.3

License

MIT

Unpacked Size

20.2 kB

Total Files

18

Last publish

Collaborators

  • gabrielnafuzi