keyevent-g

gantd keyevent-g

Usage no npm install needed!

<script type="module">
  import keyeventG from 'https://cdn.skypack.dev/keyevent-g';
</script>

README

keyevent-g


Keyevent component based with React

NPM version

Screenshot

Demo

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

install

keyevent-g

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

Anthor

GantFDT

License

MIT