RabbitPeepers supports The Armed Forces of UkraineDonate
RabbitPeepers supports The Armed Forces of UkraineDonate
Calculate project
Contact us
RabbitPeepers supports The Armed Forces of UkraineDonate
Calculate project

Mimic mobile password input with React

Finish date: 28 Sep 2020
Mykola Vasylenko
Mykola Vasylenko
Founder, Development Lead

Hello everyone!

Sometimes it can be pretty handy to utilize cross-platform concepts to introduce a bit of comfort for our users.
We came up with the idea to use mobile password behavior that can improve input accuracy for fields like tokens, IDs, and anything else containing sensitive information.

Please see react-mimic-password-hook.


  • Mask input per-type
  • Mask input after a delay
  • TypeScript support
  • Tested and ready for commercial use

persymbol mode


delayed mode

Screen Recording 2020-09-14 at 16.55.33


With yarn:

yarn add react-mimic-password-hook

With npm:

npm install react-mimic-password-hook


1import React from 'react'; 2import { useMimicPassword } from 'react-mimic-password-hook'; 3 4function App() { 5 const handleChange = React.useCallback((value, event) => { console.log(value) }, []) 6 7 const [value, presentation, onChange] = useMimicPassword({ 8 // All these parameters are optional 9 mask: '•', 10 delay: 1000, 11 mode: 'delayed', 12 handleChange 13 }) 14 15 return ( 16 <input value={presentation} onChange={onChange} /> 17 ) 18} 19


maskstringSymbol to mask the original input.
delaynumber1000Time in miliseconds before text is masked.
modestringdelayeddelayed or persymbol
handleChangefunctionundefinedCallback function for onChange that accepts two arguments. E. g. (value, event) => void


useMimicPassword returns an array with 3 members:

  • Original input value.
  • Masked presentation value.
  • onChange callback that return next value.

For a more advanced guide please see GitHub page.

Happy coding!

Clap if you like it!

Get in touch to discuss your business idea

Let's Start

Featured Case & Insights

Mykola Vasylenko
Mykola Vasylenko

Case studyBoost infrastructure by Kubernetes and custom management interface

Microservice based application for deployment automatization on custom infrastructure

Read more
Mykola Vasylenko
Mykola Vasylenko
Tonya Smyrnova
Tonya Smyrnova

Case studyPikky.space: startup in weeks with Firebase

Pikky.space is a service for interior designers to share their portfolios and find new clients. It also can serve as a source of inspiration for beautiful interiors. It dictates the main piece of functionality - user-generated content

Read more
Mykola Vasylenko
Mykola Vasylenko

Case studyLang4U: JamStack to support product launch on new markets

Complex solution for international online education product. CI/CD, payment system, content management

Read more
More cases

Interested in our services?


What's next?

We contact you
We’ll contact you within 24 hours with more information on our next steps. In the meantime, you can check out our case studies and our blog
Collect requirements
Our next step will be to collect all the requirements for your project, clarify your business objectives, and expectations towards our cooperation
After that, we’ll develop a proposal for you.


  • Development
  • Advisory
  • Infrastructure
RabbitPeepers LLC
Kyiv, Ukraine
Delaware, US
PrivacyTerms © 2019-2023