Keyevent-g NPM

keyevent-g

Keyevent component based with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

Supports custom key combinations
Supports focus state

Usage

import React, { useState, useCallback } from 'react'
import { Modal, Button } from 'antd';
import withKeyevent from 'keyevent-g';

function BasicUse() {
  const [visible, setVisible] = useState(false);

  const handlerVisible = useCallback(() => {
    setVisible(!visible)
  },[visible])
  return withKeyevent(
    <div>
      <Button onClick={handlerVisible}>点击或者按下Meta+Shift+U</Button>
      <Modal
        title="弹框标题"
        visible={visible}
        onCancel={handlerVisible}
        onOk={handlerVisible}
        cancelText="取消"
        okText="确定"
      >
        <div>
          弹框内容
        </div>
      </Modal>
    </div>,
    {
      onMetaShiftU: handlerVisible
    }
  )
}

React.render(<BasicUse/>, mountNode);