Simple input mask for brazilian CPF and CNPJ
npm install @react-br-forms/cpf-cnpj-maskThis is an wrapper to mask the value (_which can be either a CPF or CNPJ_) with the corresponding brazilian format mask, as you type. \
It will apply all the props given to it, to an input field, enabling any customization.
No dependencies included.
Este é um componente que encapsula um , com o objetivo de adicionar a máscara correspondente no valor (Podendo ser CPF ou CNPJ) do input enquanto você digita.
Os props são copiados diretamente para um , permitindo customização.
Não possui dependendências.
``shell`
$ yarn add @react-br-forms/cpf-cnpj-mask
`JSX
import React, { useState } from "react";
import ReactDOM from "react-dom";
import CpfCnpj from "@react-br-forms/cpf-cnpj-mask";
const App = () => {
const [cpfCnpj, setCpfCnpj] = useState("");
const [mask, setMask] = useState("");
return (
ReactDOM.render(
`
`JSX
import React, { useState } from "react";
import ReactDOM from "react-dom";
import CpfCnpj from "@react-br-forms/cpf-cnpj-mask";
const App = () => {
const [cpfCnpj, setCpfCnpj] = useState("");
const [mask, setMask] = useState("");
return (
ReactDOM.render(
`
| Name | Type | DefaultProps | Description |
| :-------------------------: | :---------------------: | :----------: | :----------------------------------------------------------------------------------------------------------------------------------------- |
| value | String | "" | Wrapped value. This value will be masked. | |onChange
| | Function(event, type) | () => {} | event: Wrapped onChange input event. The target.value will be masked. type
: It will return either "CPF" or "CNPJ" |type
| | String | tel | Default input type is tel. |
> Install the dependencies.
>
> - npm install or yarn installnpm run start
>
> To start the example project in dev:
>
> -
> Install the dependencies.
>
> - npm install or yarn installnpm run test
>
> To test the component:
>
> - npm run test:watch
>
> To test the component, and watch:
>
> - npm run test:coverage`
>
> To see test coverage:
>
> -
