useClickOutside

Listen to click events outside the target element

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

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useClickOutside Please click the button or outside the button to see the effect

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

The useClickOutside hook accepts three parameters:

handler – the callback function that triggers the event
events – the event type used for monitoring, default value: ['mousedown', 'touchstart']
nodes – DOM nodes or Ref, supports arrays

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

Params

Parameters	Default Value	Type	Description
handler	-	`() => void`	callback function that triggers the event
events	`['mousedown', 'touchstart']`	`(string[] null)`	Event type for listening
nodes	-	`HTMLElement[]`	DOM node or Ref, supports array

Result

Parameters	Default Value	Type	Description
ref	-	`React.MutableRefObject<T>`	target element