@accessible/use-keycode 中文文档教程
useKeycode()
npm i @accessible/use-keycode
一个 React 挂钩，用于处理特定键代码，并在 keydown
Quick Start
jsx harmony 上进行回调 从 '@accessible/use-keycode' 导入 {useKeycode, useKeycodes} // 一个键码 const 组件 = () => { // 按下退出键时记录事件 const ref = useKeycode(27, console.log) 返回
} // 几个键码 const 组件 = () => { // 当按下转义键或回车键时记录事件 const ref = useKeycodes({27: console.log, 13: console.log}) 返回}API
useKeycode(which: number, callback: (event?: KeyboardEvent) => any)
Arguments
| Argument | Type | Default | Required? | Description |
|---|---|---|---|---|
which | number | undefined | Yes | The event.which you want to trigger the callback |
| callback | (event?: KeyboardEvent) => any | undefined | Yes | The callback you want to trigger when the event.which matches the latest keyUp event |
Returns React.MutableRefObject<any>
useKeycodes(handlers: Record<number, (event?: KeyboardEvent) => any>)
Arguments
| Argument | Type | Default | Required? | Description |
|---|---|---|---|---|
handlers | Record<number, (event?: KeyboardEvent) => any> | undefined | Yes | An object with keys matching the event.which you want to trigger the callback value |
Returns React.MutableRefObject<any>
LICENSE
麻省理工学院
useKeycode()
npm i @accessible/use-keycode
A React hook for handling specific key codes with a callback on keydown
Quick Start
jsx harmony import {useKeycode, useKeycodes} from '@accessible/use-keycode' // one keycode const Component = () => { // logs event when escape key is pressed const ref = useKeycode(27, console.log) return <div ref={ref} /> } // several keycodes const Component = () => { // logs event when escape or enter key is pressed const ref = useKeycodes({27: console.log, 13: console.log}) return <div ref={ref} /> }
API
useKeycode(which: number, callback: (event?: KeyboardEvent) => any)
Arguments
| Argument | Type | Default | Required? | Description |
|---|---|---|---|---|
which | number | undefined | Yes | The event.which you want to trigger the callback |
| callback | (event?: KeyboardEvent) => any | undefined | Yes | The callback you want to trigger when the event.which matches the latest keyUp event |
Returns React.MutableRefObject<any>
useKeycodes(handlers: Record<number, (event?: KeyboardEvent) => any>)
Arguments
| Argument | Type | Default | Required? | Description |
|---|---|---|---|---|
handlers | Record<number, (event?: KeyboardEvent) => any> | undefined | Yes | An object with keys matching the event.which you want to trigger the callback value |
Returns React.MutableRefObject<any>
LICENSE
MIT
