Overlays and menus

usePopover

Manages popover disclosure — toggle, outside click close, Escape key dismiss, and arrow key navigation through focusable panel items.

Copy React example Popover component

Live component preview · Astro

Explore Popover

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses usePopover.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Button, Popover, PopoverTrigger, PopoverPanel } from '@santi020k/lumen-react'
import { usePopover } from '@santi020k/lumen-react'

export function NotificationsPopover() {
  const popover = usePopover()

  return (
    <Popover {...popover.rootProps}>
      <PopoverTrigger {...popover.triggerProps}>Notifications</PopoverTrigger>
      <PopoverPanel {...popover.panelProps}>
        <p>No new notifications.</p>
      </PopoverPanel>
    </Popover>
  )
}

import { Button, Popover, PopoverTrigger, PopoverPanel } from '@santi020k/lumen-react'
import { usePopover } from '@santi020k/lumen-react'

export function NotificationsPopover() {
  const popover = usePopover()

  return (
    <Popover {...popover.rootProps}>
      <PopoverTrigger {...popover.triggerProps}>Notifications</PopoverTrigger>
      <PopoverPanel {...popover.panelProps}>
        <p>No new notifications.</p>
      </PopoverPanel>
    </Popover>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
defaultOpen	boolean	false	Initial open state for uncontrolled usage.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback fired when the open state changes.
id	string	auto	Explicit id for the panel element.

Controller return values

Property	Type	Description
rootProps	LumenProps<"div">	Spread onto the root wrapper element.
triggerProps	LumenProps<"button">	Spread onto the trigger button. Binds click, ArrowDown, Enter, and Space key handlers.
panelProps	LumenProps<"div">	Spread onto the popover panel. Includes Escape, arrow, Home, and End key handlers.
rootRef	RefObject<HTMLElement>	Ref to the root wrapper.
triggerRef	RefObject<HTMLElement>	Ref to the trigger element.
panelRef	RefObject<HTMLElement>	Ref to the panel element.
open	boolean	Current open state.
close	() => void	Close the popover.
toggle	() => void	Toggle the popover.
setOpen	Dispatch<SetStateAction<boolean>>	State setter for controlled usage.