Tại sao?

• useKeyboardJs không giải quyết được vấn đề sử dụng phím tắt hoặc tổ hợp phím tắt với một html element cụ thể (ví dụ một textfield có id #input-textfield).
• Thao tác với phím tắt luôn tuyệt vời hơn click chuột.

Cài đặt:

1npm i -S use-hot-key-element
2hoặc
3yarn add use-hot-key-element

Sử dụng:

1import React, {useEffect, useState} from 'react'
2import useHotKey from 'use-hot-key-element'
3
4function Form(){
5  const [name, setName] = useState('')
6  
7  const [isNameInputEnterPressed] = useHotKey('enter', '#name-input')//khi nhấn phím enter trên element có id `name-input`
8  
9  useEffect(()=>{
10    if(isNameInputEnterPressed) console.log(name) // log name khi enter trên `name-input`
11  },[isNameInputEnterPressed])
12  
13  return (
14    <div>
15      <input id="name-input" value={name} onchange={(e)=>setName(e.target.value)}/>
16    </div>
17  )
18}
19

API:

• useHotKey(keys: String|Array, domQuerySelectorOrFunc: String|Function)
• useCtrlWithKey(key: String, domQuerySelectorOrFunc: String|Function)
• useShiftWithKey(key: String, domQuerySelectorOrFunc: String|Function)
• useCtrlShiftWithKey(key: String, domQuerySelectorOrFunc: String|Function)
• useCtrlEnter(domQuerySelectorOrFunc: String|Function)
• useBackSpace(domQuerySelectorOrFunc: String|Function)

Trong đó:

• key là 1 tổ hợp phím hoặc 1 phím, ví dụ: 'z', 'ctrl+c', 'shift+enter', 'shift+meta+v'(cho mac). Các phím đặc biệt bao gồm ctrl(Mac: phím control hoặc command),alt(Mac: phím option), shift.
• keys là một mảng của key sử dụng trong trường hợp lắng nghe nhiều key khác nhau, hoặc 1 key
• domQuerySelectorOrFunc là selector của element, hoặc 1 function được thực hiện khi nhấn key

License:

MIT

Author:

ClassFunc