Custom Masks

You can define custom masks for specific data formats not covered by presets.

Custom Patterns

Use 9 for numbers, a for letters, and * for alphanumeric characters. Literals are preserved.


const { productCode, serial } = useViraMask({
  form,
  schema: {
    // Product Code: 2 letters, hyphen, 4 numbers
    productCode: {
      mask: 'aa-9999',
      transform: 'uppercase',
    },
    
    // Serial Number: 3 alphanumeric, slash, 3 numbers
    serial: {
      mask: '***-999',
    }
  }
});

Custom Validation

You can provide a custom validator function. This function receives the raw (unmasked) value.


const { specialId } = useViraMask({
  form,
  schema: {
    specialId: {
      mask: '99-99',
      validate: true,
      validator: (value) => {
        // Example: Sum of digits must be even
        const sum = value.split('').reduce((acc, curr) => acc + Number(curr), 0);
        return sum % 2 === 0;
      }
    }
  }
});

The validation result is registered in React Hook Form’s formState.errors object.

Advanced Usage

For low-level masking functions (like applyMask or cleanValue) that you can use outside of the hook, refer to the Core Functions documentation.