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!
Top comments (0)