@kaisukez/use-key-down-once
v2.0.2
Published
``` npm install @kaisukez/use-key-down-once ```
Downloads
16
Readme
Install
npm install @kaisukez/use-key-down-once
How to use
import React, { useState } from 'react'
import useKeyDownOnce from '@kaisukez/use-key-down-once'
function MyComponent() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const submit = () => {
console.log('This will be trigged once when pressing enter, no matter how long you press.')
// api.login(username, password)
}
const { onKeyDown, onKeyUp } = useKeyDownOnce(submit, 'Enter')
return (
<div>
<input
value={username}
onChange={event => setUsername(event.target.value)}
/>
<input
type='password'
value={password}
onChange={event => setPassword(event.target.value)}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
/>
<button onClick={submit}>
Submit
</button>
</div>
)
}
export default MyComponent
With this way you don't have to use mouse to click submit button, instead you just press Enter to trigger submit function when you finished typing password.
But normally if you press it too long, it will trigger submit function multiple times. So this is when useKeyDownOnce comes into play.
Why this library
I just start web developer career and I find myself wrote this function a lot. So I decided to make it as a library. Maybe there's a library that already solve this problem but I still prefer my minimalistic version of my code. On top of that I just want to try to publish a library to npm registry to get some new feelings about coding.
In the future, I may use other library (if i find it interesting enough) instead of maintaining my own version of library.