Mimic mobile password input with React

Mykola — Sun, 11 Oct 2020 11:15:42 +0000

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

`delayed` mode

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

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!

DEV Community: Mykola