refactor: drop react-text-mask in favor of Maskito

[waterplea]

Resolve #8420

Description

Currently opencollective has a masked component that relies on react-text-mask package which is deprecated and is no longer supported. As mentioned in the issue and deprecation message, one option to get rid of the tech debt is to rewrite it using Maskito which has a fairly similar API and is modern and well maintained. This is what is done in this PR, keeping everything else as close as it has been before as possible.

Screenshots

The UI behavior is kept exactly the same.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
opencollective-frontend	Ready	Preview, Comment	Feb 24, 2026 3:33pm

[Betree]

Hi @waterplea, thanks for this contribution! Can you put some screenshots of the changes, to demonstrate the affected part and document the UI (even if it looks similar to the previous one)?

[waterplea]

@Betree sure, the only place where old mask was used is virtual cards data. Here's a video of the new behavior, old one should be exactly the same: 2 spaces in card number, auto added /20 to the expiry date, no validation for months going above 12 – if you want, I can use built-in Maskito date mask instead so that it will not allow users to type in 14/2026 or even year/month from the past.

Recording.2026-02-24.201218.mp4

[waterplea]

@Betree are there other places that could benefit from masking? Here's an expanse submission form where number mask would improve UI:

If you can help me understand how to login when I'm using staging environment (running npm run dev) – I could go over there and add mask to that field as well. Currently I'm unable to login or sign up (typing a new email shows error that I failed captcha), so it's pretty hard to test forms – I have to add the form component to the main page and supply it with mock data.

[Betree]

@Betree are there other places that could benefit from masking?

Eventually, but we should keep this update focused on feature parity and not try to extend the scope for now.

If you can help me understand how to login when I'm using staging environment (running npm run dev) – I could go over there and add mask to that field as well. Currently I'm unable to login or sign up (typing a new email shows error that I failed captcha), so it's pretty hard to test forms – I have to add the form component to the main page and supply it with mock data.

Sorry, we recently updated our captcha strategy and these instructions were missing from the README. I just pushed an update:

Logging in with staging: Because captcha is not configured by default in local development, you need to create an account on staging.opencollective.com first. You can then use this account to log in on your local frontend.

[waterplea]

Eventually, but we should keep this update focused on feature parity and not try to extend the scope for now.

Sure, that was my thoughts as well, just wanted to highlight that there are further masking improvements available once we land the library. Maskito has all kinds of presets out of the box for numbers, dates, phones etc. As for the parity, I believe we have it in this PR.

Thank you for the instruction, I am now able to login locally.