useFocusWithin

Monitor whether the current focus is within a certain area, Same as css attribute

Overview

Monitor whether the current focus is within a certain area, Same as css attribute :focus-within.

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFocusWithin.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFocusWithin.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFocusWithin.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFocusWithin.json

const isFocusWithin = useFocusWithin(
  target,
  {
   onFocus,
   onBlur,
   onChange
  }
);

Property	Description	Type	Default
target	DOM element or ref	`() => Element` \| `Element` \| `MutableRefObject<Element>`	-
options	More config	`Options`	-

Property	Description	Type	Default
onFocus	Callback to be executed on focus	`(e: FocusEvent) => void`	-
onBlur	Callback to be executed on blur	`(e: FocusEvent) => void`	-
onChange	Callback to be executed on focus change	`(isFocusWithin: boolean) => void`	-

Property	Description	Type
isFocusWithin	Whether the focus is in the current area	`boolean`