V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
favori
V2EX  ›  React

React Keyevent — 非常容易使用的一个键盘事件监听 react 组件,可实现各种自定义快捷键功能,只有不到 3kb

  •  1
     
  •   favori · 2021-08-29 16:42:58 +08:00 · 1377 次点击
    这是一个创建于 1172 天前的主题,其中的信息可能已经有所发展或是发生改变。

    React Keyevent

    npm version npm versionnpm version npm version npm version npm version

    An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb

    非常容易使用的一个键盘事件监听 react 组件,可实现各种自定义快捷键功能,只有不到 3kb

    repository-open-graph-template 副本

    Repository

    https://github.com/yuanguandong/react-keyevent

    Live demo

    https://react-keyevent.netlify.app/

    https://yuanguandong.github.io/react-keyevent/

    Install

    npm i react-keyevent -S
    

    How to use

    import React, { useState } from "react";
    import Keyevent from "react-keyevent";
    
    const TopSide = () => {
      const [count, setCount] = useState(0);
      const onAltT = () => {
        setCount(count + 1);
      };
      return (
        <Keyevent
          className="TopSide"
          events={{
            onAltT,
          }}
          needFocusing
        >
          <span className="tip">Click To Focusing</span>
          <div className="group">
            <span className="key">Alt</span>
            <span className="key">T</span>
            <span className="count">{count}</span>
          </div>
        </Keyevent>
      );
    };
    export default TopSide
    

    Props

    property required type defaultValue description
    events true { [key: string]: (e: KeyboardEvent) => void } null The binding keyboard events 绑定的键盘事件
    needFocusing false boolean false 是否需要聚焦,若值为 true,则需要聚焦 Focus 这个容器组件(点击)

    感兴趣的先点个 star 收藏起吧,说不定那天就会用到了!

    4 条回复    2021-08-29 20:42:48 +08:00
    40EaE5uJO3Xt1VVa
        1
    40EaE5uJO3Xt1VVa  
       2021-08-29 18:38:43 +08:00
    我是第九个 star 的
    tousfun
        2
    tousfun  
       2021-08-29 20:31:16 +08:00 via iPhone
    已 star 老哥这个宣传页用什么做的,还挺好看的
    favori
        3
    favori  
    OP
       2021-08-29 20:42:25 +08:00
    @919615766 自己做的,感谢喜欢😍,感兴趣可以 fork 一下,代码就在 example 里,写的比较潦草
    favori
        4
    favori  
    OP
       2021-08-29 20:42:48 +08:00
    @yanzhiling2001 谢谢!谢谢老哥
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5336 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:10 · PVG 15:10 · LAX 23:10 · JFK 02:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.