npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hjgs/text-mask-addons

v3.8.0-1

Published

Addons for Text Mask https://github.com/text-mask/text-mask

Downloads

14

Readme

Text Mask Addons

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

Installation

npm i text-mask-addons --save

Masks

These can be passed as a mask to Text Mask.

createNumberMask

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

Usage

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

emailMask formats user input as an email address.

Usage

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.

Pipes

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

createAutoCorrectedDatePipe

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.

Usage

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`.

// ...now you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`