@hipolitotata/react-masked-input

Uma lib pequena e flexivel de masked input para React, feita para uso real no dia a dia e facil de compartilhar.

O que ela entrega

• Componente MaskedInput para React
• Helpers puros para mascarar e desmascarar valores
• Suporte a mascara unica ou dinamica
• Tipagem em TypeScript
• Build em ESM + CJS

Instalacao

pnpm add @hipolitotata/react-masked-input

ou

npm install @hipolitotata/react-masked-input

Uso rapido

import { MaskedInput } from "@hipolitotata/react-masked-input";

export function Form() {
  return (
    <MaskedInput
      mask="999.999.999-99"
      placeholder="CPF"
      onValueChange={({ masked, unmasked, complete }) => {
        console.log({ masked, unmasked, complete });
      }}
    />
  );
}

Mascara dinamica

import { MaskedInput } from "@hipolitotata/react-masked-input";

const phoneMasks = ["(99) 9999-9999", "(99) 99999-9999"];

export function PhoneField() {
  return <MaskedInput mask={phoneMasks} placeholder="Telefone" />;
}

Helpers

import { applyMask, parseMaskedValue, stripMask } from "@hipolitotata/react-masked-input";

applyMask("12345678901", "999.999.999-99");
parseMaskedValue("(11) 91234-5678", ["(99) 9999-9999", "(99) 99999-9999"]);
stripMask("123.456.789-00", "999.999.999-99");

API

MaskedInput

Props principais:

• mask: string | string[]
• value: valor sem mascara para modo controlado
• defaultValue: valor sem mascara para modo nao controlado
• replacement: mapa de tokens customizados
• maskPlaceholder: placeholder para partes faltantes da mascara
• onValueChange: retorna { masked, unmasked, complete }

Tokens padrao:

• 9: numeros
• A: letras
• *: alfanumerico

Tokens customizados

<MaskedInput
  mask="HH:MM"
  replacement={{
    H: /[0-2]/,
    M: /[0-5]/
  }}
/>

Desenvolvimento local

pnpm install
pnpm check
pnpm build

Como publicar no npm

1. Crie sua conta em npmjs.com se ainda nao tiver.
2. Rode npm login.
3. Ajuste no package.json:
   • name
   • author
   • homepage
   • repository
4. Se quiser publicar com escopo pessoal, use algo como @seu-usuario/react-masked-input.
5. Rode pnpm install.
6. Rode pnpm build.
7. Publique com npm publish --access public.

Sugestao antes de publicar

• adicionar testes
• criar exemplos com Vite
• subir o codigo no GitHub
• configurar CI para rodar pnpm check e pnpm build