Components

Component

Popover

Anchored floating panel for lightweight contextual controls.

React4 props
PreviewReact

Imports

import { Popover } from "@hozorica/hods-react/popover";

Props

PropTypeDescription
open / defaultOpenbooleanControlled and uncontrolled visibility.
onOpenChange(open) => voidCalled when visibility changes.
placementtop-start | top-end | bottom-start | bottom-endContent alignment around the trigger.
widthnumber | stringPopover content width.

Platform Support

React

Compound trigger and content with outside-click and Escape dismissal.

React Native

Use BottomSheet for equivalent mobile contextual panels.

Usage

<PopoverRoot><PopoverTrigger><button>Open</button></PopoverTrigger><PopoverContent>Content</PopoverContent></PopoverRoot>

Notes

  • Use Popover for small forms, filters, and contextual configuration.
  • Use Dialog or BottomSheet for blocking workflows.