Alias Mask

Alias masks provide pre-configured masks for common use cases like dates, currency, email, and more. They save you from writing complex mask patterns manually.

Available Aliases

The library includes the following built-in aliases:

• datetime - Date and time formatting
• email - Email address validation
• ip - IP address (IPv4)
• cpf - Brazilian CPF (tax ID)
• cnpj - Brazilian CNPJ (company tax ID)
• br-bank-account - Brazilian bank account numbers (multiple formats)
• br-bank-agency - Brazilian bank agency numbers
• numeric - Numeric input
• currency - Currency formatting
• brl-currency - Brazilian Real (R$) currency
• decimal - Decimal numbers
• integer - Integer numbers
• percentage - Percentage values
• url - URL formatting
• mac - MAC address
• ssn - Social Security Number

Basic Usage

Simply use the alias name as the mask:

import { useMaskInput } from 'use-mask-input';

function DateInput() {
  const dateMask = useMaskInput({
    mask: 'datetime',
    options: {
      inputFormat: 'dd/mm/yyyy',
    },
  });

  return (
    <input
      type="text"
      ref={dateMask}
      placeholder="DD/MM/YYYY"
    />
  );
}

Common Examples

Date and Time

function DateTimeInput() {
  const dateTimeMask = useMaskInput({
    mask: 'datetime',
    options: {
      inputFormat: 'dd/mm/yyyy HH:MM',
      outputFormat: 'yyyy-mm-dd HH:MM',
    },
  });

  return (
    <input
      type="text"
      ref={dateTimeMask}
      placeholder="DD/MM/YYYY HH:MM"
    />
  );
}

Email

function EmailInput() {
  const emailMask = useMaskInput({
    mask: 'email',
  });

  return (
    <input
      type="email"
      ref={emailMask}
      placeholder="user@example.com"
    />
  );
}

Currency

function CurrencyInput() {
  const currencyMask = useMaskInput({
    mask: 'currency',
    options: {
      prefix: 'R$ ',
      groupSeparator: '.',
      radixPoint: ',',
      digits: 2,
    },
  });

  return (
    <input
      type="text"
      ref={currencyMask}
      placeholder="R$ 0,00"
    />
  );
}

IP Address

function IpAddressInput() {
  const ipMask = useMaskInput({
    mask: 'ip',
  });

  return (
    <input
      type="text"
      ref={ipMask}
      placeholder="192.168.0.1"
    />
  );
}

Brazilian CPF

function CpfInput() {
  const cpfMask = useMaskInput({
    mask: 'cpf',
  });

  return (
    <input
      type="text"
      ref={cpfMask}
      placeholder="000.000.000-00"
    />
  );
}

Brazilian CNPJ

function CnpjInput() {
  const cnpjMask = useMaskInput({
    mask: 'cnpj',
  });

  return (
    <input
      type="text"
      ref={cnpjMask}
      placeholder="00.000.000/0000-00"
    />
  );
}

Brazilian Bank Account

Automatically handles multiple bank account formats supporting Bradesco, Itaú, Banco do Brasil, Caixa Econômica, Nubank, and other Brazilian banks.

Basic Usage

function BankAccountInput() {
  const bankAccountMask = useMaskInput({
    mask: 'br-bank-account',
  });

  return (
    <input
      type="text"
      ref={bankAccountMask}
      placeholder="1234567-9"
    />
  );
}

Supported Formats

The mask automatically adapts to different bank account number formats:

function BankAccountInput() {
  const bankAccountMask = useMaskInput({
    mask: 'br-bank-account',
  });

  return (
    <input
      type="text"
      ref={bankAccountMask}
      placeholder="00.000.000/0000-00"
    />
  );
}

Supported formats:

• 1234567-9 (Bradesco, Stone, Next)
• 12345678-9 (BB, Santander, Safra)
• 123456789-9 (Itaú, Inter, Sicoob)
• 1234567890-1 (Nubank, Neon, Mercado Pago)
• (001)12345678-9 (Caixa Econômica)
• 123456 or 1234567 (optional separator for Agibank, BV)

Example with placeholder customization:

function BankAccountInput() {
  const bankAccountMask = useMaskInput({
    mask: 'br-bank-account',
  });

  return (
    <input
      type="text"
      ref={bankAccountMask}
      placeholder="(000) 12345678-9"
    />
  );
}

Brazilian Bank Agency

Automatically handles bank agency numbers for major Brazilian banks.

Basic Usage

function BankAgencyInput() {
  const bankAgencyMask = useMaskInput({
    mask: 'br-bank-agency',
  });

  return (
    <input
      type="text"
      ref={bankAgencyMask}
      placeholder="0000"
    />
  );
}

Supported Formats

Bank agency numbers typically range from 3 to 5 digits, commonly formatted as:

• 0000 (4 digits - most common)
• 000 (3 digits)
• 00000 (5 digits)

Example with placeholder customization:

function BankAgencyInput() {
  const bankAgencyMask = useMaskInput({
    mask: 'br-bank-agency',
  });

  return (
    <input
      type="text"
      ref={bankAgencyMask}
      placeholder="(0000)"
    />
  );
}

Numeric Input

function NumericInput() {
  const numericMask = useMaskInput({
    mask: 'numeric',
    options: {
      min: 0,
      max: 1000,
    },
  });

  return (
    <input
      type="text"
      ref={numericMask}
      placeholder="0"
    />
  );
}

Decimal Numbers

function DecimalInput() {
  const decimalMask = useMaskInput({
    mask: 'decimal',
    options: {
      digits: 2,
      radixPoint: ',',
      groupSeparator: '.',
    },
  });

  return (
    <input
      type="text"
      ref={decimalMask}
      placeholder="0,00"
    />
  );
}

Percentage

function PercentageInput() {
  const percentageMask = useMaskInput({
    mask: 'percentage',
    options: {
      digits: 2,
      suffix: ' %',
    },
  });

  return (
    <input
      type="text"
      ref={percentageMask}
      placeholder="0,00 %"
    />
  );
}

URL

function UrlInput() {
  const urlMask = useMaskInput({
    mask: 'url',
  });

  return (
    <input
      type="url"
      ref={urlMask}
      placeholder="https://example.com"
    />
  );
}

MAC Address

function MacAddressInput() {
  const macMask = useMaskInput({
    mask: 'mac',
  });

  return (
    <input
      type="text"
      ref={macMask}
      placeholder="00:00:00:00:00:00"
    />
  );
}

Tips

• Aliases provide a quick way to implement common input formats
• Most aliases accept additional options for customization
• Use aliases when you need standard formatting patterns
• Combine alias options with custom configurations for specific requirements