Calculate project
Contact us
Calculate project

Mimic mobile password input with React

Mykola Vasylenko
Mykola Vasylenko
founder, development lead
Finish date: 28 Sep 2020

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!

Featured cases

Mykola Vasylenko

Boost infrastructure by Kubernetes and custom management interface

Read more

Mykola Vasylenko

Pikky.space: startup in weeks with Firebase

Custom service to find interior designer or publish your design projects

Read more

Mykola Vasylenko

Lang4U: 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-2021