@kne/use-click-outside

0.2.1 • Public • Published

use-click-outside

描述

用于捕获dom以外的元素点击事件

安装

npm i --save @kne/use-click-outside

概述

实现了一个点击容器之外触发回调函数的hooks

示例

示例样式

.container{
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

示例代码

  • 基本示例
  • 点击容器外部就弹窗提示
  • _useClickOutside(@kne/use-click-outside),_message(antd/lib/message)
const {default: useClickOutside} = _useClickOutside;
const {default: message} = _message;

const BaseExample = () => {
    const ref = useClickOutside(() => {
        message.success('点击了容器外部');
    });
    return <div ref={ref} className="container">
        这是组件内部,点击外部试试
    </div>;
};

render(<BaseExample/>);

API

const ref = useClickOutside(callback, dom);

注意:返回的ref必须传给一个dom的ref

属性名 说明 类型 默认值
callback 模拟的失去焦点事件触发后执行的回调 function -
dom 可以触发点击的外部区域,默认为body dom document.body

Readme

Keywords

none

Package Sidebar

Install

npm i @kne/use-click-outside

Weekly Downloads

26

Version

0.2.1

License

ISC

Unpacked Size

9.96 kB

Total Files

7

Last publish

Collaborators

  • metacoo
  • yangwang123456
  • juliewang
  • lingtong