https://github.com/gabrielnafuzi/brazilian-masks

simple brazilian masks to use on day to day (CNPJ, CPF, CEP, Phone, PIS)
https://github.com/gabrielnafuzi/brazilian-masks

typescript

Last synced: 12 days ago
JSON representation

simple brazilian masks to use on day to day (CNPJ, CPF, CEP, Phone, PIS)

• Host: GitHub
• URL: https://github.com/gabrielnafuzi/brazilian-masks
• Owner: gabrielnafuzi
• Created: 2021-09-22T05:06:17.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-27T14:00:49.000Z (9 months ago)
• Last Synced: 2024-11-01T12:35:42.315Z (19 days ago)
• Topics: typescript
• Language: TypeScript
• Homepage:
• Size: 127 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```sh

npm i @nafuzi/brazilian-masks

```

or

```sh

yarn add @nafuzi/brazilian-masks

```

### Simple use (Vanilla JS)

```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)

```tsx

// MaskedInput.tsx

import type { ChangeEvent, HTMLProps } from 'react'

import masks, { type MasksName } from '@nafuzi/brazilian-masks'

type MaskedInputProps = {

  mask: MasksName

  onChange: (maskedValue: string) => void

} & Omit, 'onChange'>

export const MaskedInput = ({

  name,

  value,

  onChange,

  mask,

  ...rest

}: MaskedInputProps) => {

  const handleOnChange = (event: ChangeEvent) => {

    const maskedValue = masks[mask](event.target.value)

    onChange(maskedValue)

  }

  return 

}

// App.tsx

import { useState } from 'react'

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

const App = () => {

  const [cpf, setCpf] = useState('')

  return (

     setCpf(value)}

      mask="cpf"

    />

  )

}

export default App

```

## Contributing

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

## License

MIT