@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

    Install

    npm i @nafuzi/brazilian-masks

    DownloadsWeekly Downloads

    12

    Version

    1.8.3

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • gabrielnafuzi