RabbitPeepers supports The Armed Forces of Ukraine. We funded $10k Donate
RabbitPeepers supports The Armed Forces of Ukraine. We funded $10k Donate
Calculate project
Contact us
RabbitPeepers supports The Armed Forces of Ukraine. We funded $10k Donate
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.

Features

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

persymbol mode

persymbol-demo

delayed mode

Screen Recording 2020-09-14 at 16.55.33

Installation

With yarn:

yarn add react-mimic-password-hook

With npm:

npm install react-mimic-password-hook

Quickstart

import React from 'react';
import { useMimicPassword } from 'react-mimic-password-hook';

function App() {
  const handleChange = React.useCallback((value, event) => { console.log(value) }, [])

  const [value, presentation, onChange] = useMimicPassword({
    // All these parameters are optional
    mask: '•',
    delay: 1000,
    mode: 'delayed',
    handleChange
  })

  return (
    <input value={presentation} onChange={onChange} />
  )
}

Options

NameTypeDefaultDescription
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

API

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 advice from our Senior BDM specialist:

Dan Monakov Dan MonakovLeave a request

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?

Checked

What's next?

1
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
2
Collect requirements
Our next step will be to collect all the requirements for your project, clarify your business objectives, and expectations towards our cooperation
3
Proposal
After that, we’ll develop a proposal for you.

Services

  • Development
  • Advisory
  • Infrastructure
RabbitPeepers LLC
contact@rabbitpeepers.com
Kyiv, Ukraine
Delaware, US
PrivacyTerms © 2019-2022