useClickOutside

监听目标元素外的点击事件

Import: import { useClickOutside } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useClickOutside 请点击按钮或按钮外查看效果

import React from 'react';
import { useClickOutside } from '@kubed/hooks';
import { Button } from '@kubed/components'

export default function App() {
  const [counter, setCounter] = React.useState(0);
  const ref = useClickOutside(() => {
    console.log('OutsideClick')
    setCounter(counter => counter+1)
  }
);

    return (
      <div>
        <p>counter: {counter}</p>
        <Button ref={ref}>Button</Button>
      </div>
    );
}

1
import React from 'react';
2
import { useClickOutside } from '@kubed/hooks';
3
import { Button } from '@kubed/components'
4

5
export default function App() {
6
  const [counter, setCounter] = React.useState(0);
7
  const ref = useClickOutside(() => {
8
    console.log('OutsideClick')
9
    setCounter(counter => counter+1)
10
  }
11
);
12

13
    return (
14
      <div>
15
        <p>counter: {counter}</p>
16
        <Button ref={ref}>Button</Button>
17
      </div>
18
    );
19
}
20

21

API

useClickOutside 钩子接受三个参数：

handler – 触发事件的回调函数
events – 用于监听的事件类型，默认值: ['mousedown', 'touchstart']
nodes – DOM 节点或者 Ref，支持数组

1
function useClickOutside<T extends HTMLElement = any>(
2
  handler: () => void, events?: string[] | null, nodes?: HTMLElement[]
3
): React.MutableRefObject<T>

Params

参数	默认值	类型	描述
handler	-	`() => void`	触发事件的回调函数
events	`['mousedown', 'touchstart']`	`(string[] null)`	用于监听的事件类型
nodes	-	`HTMLElement[]`	DOM 节点或者 Ref，支持数组

Result

参数	默认值	类型	描述
ref	-	`React.MutableRefObject<T>`	目标元素