/react-cpf-cnpj-mask

Primary LanguageJavaScript

Simple CPF and CNPJ input mask.

Azure Static Web Apps CI/CD

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 👿

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

License

License