brazilian-masks

KO | EN

gitlite — search

#javascript #ai #typescript #llm #machine-learning #docker #windows #awesome #cli #kubernetes #vue #ios #openai #open-source

brazilian-masks

(★ 14)

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

brazilian-masks 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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<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

brazilian-masks

brazilian-masks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

brazilian-masks

brazilian-masks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README