Difference to text-mask?

[jantimon]

Hi - what are the differences to https://github.com/text-mask/text-mask ?

[everdimension]

While the mentioned "text-mask" is an excellent library, there is a fundamental difference compared to this project.

This explanation is worth adding to the README, but for now I'll keep it here.

When using a library for formatting the user input, you have to tell the library how it should format it.

The basic difference is how you tell it. Almost all libraries that I know of use a mask. Masks are a great idea and one that is very simple to use.... but not for all cases.

Say that we expect the user to enter 16-digits bank card number and we want to put a space between each digit group (so that 1234567812345678 becomes 1234 5678 1234 5678).
We can think of a mask quite easily:

{ mask: 'XXXX-XXXX-XXXX-XXXX' }

Or in case of the mentioned text-mask library, the mask would look like this:

{
  mask: [
    /\d/, /\d/, /\d/, /\d/, ' ',
    /\d/, /\d/, /\d/, /\d/, ' ',
    /\d/, /\d/, /\d/, /\d/, ' ',
    /\d/, /\d/, /\d/, /\d/,
  ],
}

It's quite simple. It's the case for which a mask is a great choice.

But let's say that we want the user to enter a number of an arbitrary length and we want to do the digit grouping
(so that something like this 12345678 becomes 12,345,678 according to the en-US standard).

How do you describe it with a mask? I think it's quite hard. Surely some kind of mask-regex syntax can be invented, but this would just add complexity to the problem.

But at the same time... if we just ask ourselves, "how hard can it be to go from 12345678 to 12,345,678?! It's input-output at it's simplest, and we have the most powerful tool: functions.

function formatNumber(string = '') {
  return string
    .split('').reverse().map((char, i) => {
       if (i && i % 3 === 0) {
        return `${char},`;
      }
      return char;
    })
    .reverse().join('');
}

So I thought, wouldn't it be great if we just give the library a function which describes what kind of output we wish to get given a certain input and the library would just take care of the cursor position?

It would have lots of benefits, the major one being that we don't even care how that formatNumber function is implemented under the hood. It might be changed to this:

function formatNumber(string = '') {
  return new Intl.NumberFormat('en-US').format(string);
}

This is how easy it can potentially be to use a standard NumberFormat object for parsing the user input, even with support for different locales (which would be a tremendous headache otherwise). And again, the library would just take care of the cursor position.

---

So this is why I believe functions to be superior to masks and why I decided to create this library.

But thanks to this issue, I checked out this text-mask project a bit more and I see that it supports passing functions as the mask value. That function still has to return a mask, though, but it shouldn't be hard to create a mask if you have the desired output.

[jantimon]

Hey @everdimension thanks for your long explanation 👍

I totally agree there is a great value of moving cursor position into a library like yours and often multiple solutions to the same problem lead to better results in the end.

When I saw your project I was just trying to make sure you know textmask and can reuse some of the ideas or contribute to their project :)

If I remember correctly text mask offers two configurations:

1. Text masks (as you described before it's just quite stupid regexp)
2. Text pipes (please check your self I might be wrong on this) a function which does exactly what you described above: https://github.com/text-mask/text-mask/blob/master/addons/src/createAutoCorrectedDatePipe.js