new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

hooks/useclickoutside

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useClickOutside hook API signature

The useClickOutside hook accepts 4 arguments: handler (function called when clicking outside), events (optional list of events that trigger outside click, defaults to ['mousedown', 'touchstart']), nodes (optional list of nodes that should not trigger outside click event), and enabled (optional boolean to dynamically enable/disable the listener, defaults to true). The hook returns a ref object that must be passed to the element based on which outside clicks should be captured.

useClickOutside basic example

Example showing basic useClickOutside usage: import { useClickOutside } from '@mantine/hooks'; function Example() { const handleClickOutside = () => console.log('Clicked outside of div'); const ref = useClickOutside(handleClickOutside); return <div ref={ref} />; }

useClickOutside custom events

By default, useClickOutside listens to 'mousedown' and 'touchstart' events. You can change which events trigger the outside click handler by passing an array of events as the second argument.

useClickOutside multiple nodes example

Example with multiple nodes: import { useState } from 'react'; import { Portal } from '@mantine/core'; import { useClickOutside } from '@mantine/hooks'; function Demo() { const [dropdown, setDropdown] = useState<HTMLDivElement | null>(null); const [control, setControl] = useState<HTMLDivElement | null>(null); useClickOutside(() => console.log('outside'), null, [control, dropdown]); return <div><div ref={setControl}>Control</div><Portal><div ref={setDropdown}>Dropdown</div></Portal></div>; } Note: When handling multiple nodes, use useState instead of useRef for tracking node references.

useClickOutside TypeScript generic type

You can specify the ref type using a TypeScript generic: const ref = useClickOutside<HTMLDivElement>(() => console.log('Click outside'));

useClickOutside TypeScript definition

function useClickOutside<T extends HTMLElement = any>(handler: (event: MouseEvent | TouchEvent) => void, events?: string[] | null, nodes?: (HTMLElement | null)[], enabled?: boolean): React.RefObject<T>;

Give your agent this brain