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);

API

Documentation

Contact

• Create a Github issue for bug reports, feature requests, or questions
• Follow @GantFDT for announcements
• Add a ⭐️ star on GitHub to support the project❤️!

Anthor

GantFDT

License

MIT