@phpenterprise/cpf-cnpj-mask v1.0.1

Simple CPF and CNPJ input mask (Fixed).

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

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

License

• MIT license