DEV Community

Cover image for Mimic mobile password input with React
Mykola for RabbitPeepers

Posted on

3 1 1

Mimic mobile password input with React

Initially published in the RabbitPeepers blog: https://rabbitpeepers.com/blog/mimic-mobile-password-input-with-react-827188fb-d0e8-477e-8699-7dbccc59cc77

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.gif

delayed mode

Screen Recording 2020-09-14 at 16.55.33.gif

Installation

With yarn:

yarn add react-mimic-password-hook
Enter fullscreen mode Exit fullscreen mode

With npm:

npm install react-mimic-password-hook
Enter fullscreen mode Exit fullscreen mode

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} />
  )
}
Enter fullscreen mode Exit fullscreen mode

Options

Name Type Default Description
mask string Symbol to mask the original input.
delay number 1000 Time in miliseconds before text is masked.
mode string delayed delayed or persymbol
handleChange function undefined Callback 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!

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

Top comments (0)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Explore this insightful post in the vibrant DEV Community. Developers from all walks of life are invited to contribute and elevate our shared know-how.

A simple "thank you" could lift spirits—leave your kudos in the comments!

On DEV, passing on wisdom paves our way and unites us. Enjoyed this piece? A brief note of thanks to the writer goes a long way.

Okay