Have ideas to improve npm?Join in the discussion! »

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

    1.0.6 • Public • Published

    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

    Install

    npm i @react-br-forms/cpf-cnpj-mask

    DownloadsWeekly Downloads

    309

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar