Narcoleptic's Patch Mangler

    TypeScript icon, indicating that this package has built-in type declarations

    3.9.0 • Public • Published

    Text Mask Addons

    These addons are ready-to-use pipes and masks that can be used with Text Mask.


    npm i text-mask-addons-legacy --save


    These can be passed as a mask to Text Mask.


    createNumberMask returns a numberMask function that will format user input as currency. createNumberMask accepts an object with the following keys:

    1. prefix (string): what to display before the amount. Defaults to '$'.
    2. suffix (string): what to display after the amount. Defaults to empty string.
    3. includeThousandsSeparator (boolean): whether or not to separate thousands. Defaults to to true.
    4. thousandsSeparatorSymbol (string): character with which to separate thousands. Default to ','.
    5. allowDecimal (boolean): whether or not to allow the user to enter a fraction with the amount. Default to false.
    6. decimalSymbol (string): character that will act as a decimal point. Defaults to '.'
    7. decimalLimit (number): how many digits to allow after the decimal. Defaults to 2
    8. integerLimit (number): limit the length of the integer number. Defaults to null for unlimited
    9. requireDecimal (boolean): whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults to false.
    10. allowNegative (boolean): whether or not to allow negative numbers. Defaults to false
    11. allowLeadingZeroes (boolean): whether or not to allow leading zeroes. Defaults to false


    import createNumberMask from 'text-mask-addons/dist/createNumberMask'
    // First, you need to create the `numberMask` with your desired configurations
    const numberMask = createNumberMask({
      prefix: '',
      suffix: ' $' // This will put the dollar sign at the end, with a space.
    // ...then pass `numberMask` to the Text Mask component as the mask


    emailMask formats user input as an email address.


    import emailMask from 'text-mask-addons/dist/emailMask'
    // ...then pass `emailMask` to the Text Mask component as the mask

    Technical side note: even though emailMask is passed as a mask, it is actually made of both a mask and a pipe bundled together for convenience. The Text Mask component knows how to unwrap and separate the pipe and mask functions to use them.


    These functions here can be passed as a pipe to Text Mask.


    The createAutoCorrectedDatePipe returns a autoCorrectedDatePipe, which can help the user in entering a date. The createAutoCorrectedDatePipe accepts a string specifying date format and an object with the following keys:

    1. minYear (number): the minimum year allowed in the date field mask.
    2. maxYear (number): the maximum year allowed in the date field mask.

    For example, if the user enters a value larger than 1 in the 1st slot of month, it appends 0 to it. That is 4 => 04. It does a similar thing for the day slots.

    It also blocks the user from entering invalid days or months such as 33/44.

    For createAutoCorrectedDatePipe to work properly, the Text Mask component needs to be configured with keepCharPositions set to true.


    import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'
    const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM')
    // As you can see in the line above, you can pass a string argument to `createAutoCorrectedDatePipe`
    // to give it the order of day, month, year, hour and minute in your `mask`.
    // you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`


    npm i text-mask-addons-legacy

    DownloadsWeekly Downloads






    Unpacked Size

    2.73 MB

    Total Files


    Last publish


    • gruven