@mshafiqyajid/react-popover
Headless popover hook and styled component. Click or hover triggered, rich ReactNode content, optional title header, arrow, smart viewport flip, 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>API #
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Popover body content |
| title | string | — | Optional header title |
| placement | "top" | "bottom" | "left" | "right" | "bottom" | Preferred placement (auto-flips) |
| trigger | "click" | "hover" | "click" | How to open |
| size | "sm" | "md" | "lg" | "md" | Width |
| showArrow | boolean | true | Show arrow pointing to trigger |
| closeOnOutsideClick | boolean | true | Close on outside click |
| closeOnEsc | boolean | true | Close on Escape |
| offset | number | 8 | Gap between trigger and popover in px |