@react-br-forms/cpf-cnpj-mask NPM

Simple CPF and CNPJ input mask.

ttystrudio GIF

This is an <input /> 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 <input />, 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 <input />, permitindo customização. Não possui dependendências.

Demo :imp:

Demo

Installation

$ yarn add @react-br-forms/cpf-cnpj-mask

Example

Basic Example

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 (
    <div>
      <CpfCnpj
        value={cpfCnpj}
        onChange={(event, type) => {
          setCpfCnpj(ev.target.value);
          setMask(type === "CPF");
        }}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

With custom props

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 (
    <div>
      <CpfCnpj
        className="customizedInput"
        placeholder="Digite um CPF ou CNPJ"
        type="tel"
        value={cpfCnpj}
        onChange={(event, type) => {
          setCpfCnpj(ev.target.value);
          setMask(type === "CPF");
        }}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Component Props

Name	Type	DefaultProps	Description
`value`	`String`	`""`	Wrapped `<input/>` 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`.

About the repository

Install the dependencies.
npm install or yarn install
To start the example project in dev:
npm run start

Test

Install the dependencies.
npm install or yarn install
To test the component:
npm run test
To test the component, and watch:
npm run test:watch
To see test coverage:
npm run test:coverage