@mshafiqyajid/react-popover
Headless popover hook and styled component. Click or hover triggered, rich ReactNode content, optional title header, arrow, full placement set with -start/-end alignment, flip + shift + offset + collisionPadding, portal positioning.
Playground #
Props
TSX
import { PopoverStyled } from "@mshafiqyajid/react-popover/styled";
import "@mshafiqyajid/react-popover/styles.css";
<PopoverStyled
title="More info"
content="This is the popover content."
/>Install #
npm install @mshafiqyajid/react-popoverQuick start #
import { PopoverStyled } from "@mshafiqyajid/react-popover/styled";
import "@mshafiqyajid/react-popover/styles.css";
<PopoverStyled
title="Keyboard shortcuts"
content={
<div>
<p>⌘K — Command palette</p>
<p>⌘S — Save</p>
</div>
}
>
<button>Show shortcuts</button>
</PopoverStyled>Headless #
import { usePopover } from "@mshafiqyajid/react-popover";
const { triggerProps, popoverProps, isOpen, close } = usePopover({
trigger: "click",
closeOnEsc: true,
});
return (
<>
<button {...triggerProps}>Open</button>
{isOpen && (
<div {...popoverProps} className="my-popover">
<p>Content</p>
<button onClick={close}>Close</button>
</div>
)}
</>
);The hook delegates positioning to the consumer — pair with your own floating-UI library or absolute layout. PopoverStyled uses Floating UI internally.
API #
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Popover body content |
| title | string | — | Optional header title |
| placement | top | bottom | left | right (each with optional -start / -end) | "bottom" | Preferred side and alignment |
| trigger | "click" | "hover" | "click" | How to open |
| size | "sm" | "md" | "lg" | "md" | Width |
| showArrow | boolean | true | Show arrow pointing to trigger |
| offset | number | 8 | Gap between trigger and popover |
| collisionPadding | number | 8 | Viewport edge margin for flip / shift |
| flip | boolean | true | Auto-flip to opposite side near edges |
| shift | boolean | true | Push back into view along the cross-axis |
| strategy | "absolute" | "fixed" | "absolute" | Positioning strategy |
| closeOnOutsideClick | boolean | true | Close on outside click |
| closeOnEsc | boolean | true | Close on Escape |
data-placement #
The popover's data-placement attribute reflects the resolved (post-flip) placement. Use it to style side-specific arrow direction, radius, etc.