Skip to main content

Popover

The Popover component is a floating element that appears relative to a reference element, typically used to display additional information or actions.

Basic Usage

import { Popover, Button } from "@carton-org/react-neumorphism";
import { useRef, useState } from "react";

const MyComponent = () => {
const anchorRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);

return (
<>
<Button ref={anchorRef} onClick={() => setIsOpen(!isOpen)}>
Toggle Popover
</Button>
<Popover
anchorRef={anchorRef}
display={isOpen}
alignment="bottom-left"
onClickOutside={() => setIsOpen(false)}
>
<div>
<h4>Popover Content</h4>
<p>This is the popover content</p>
</div>
</Popover>
</>
);
};

Live Example

Props

NameTypeDescriptionRequiredDefault Value
anchorRefReact.RefObject<HTMLElement | null>Reference to the element the popover is positioned relative toYes-
displaybooleanWhether the popover is visibleYes-
childrenReact.ReactNodeContent to be displayed inside the popoverNo-
alignment"bottom-left" | "bottom-right" | "bottom-center" | "top-left" | "top-right" | "top-center"Position of the popover relative to the anchor elementNo-
onClickOutside() => voidCallback function when clicking outside the popoverNo-
popoverContainerStyleReact.CSSPropertiesCustom styles to apply to the popover containerNo-

Examples

Bottom Left Alignment

Top Right Alignment

Center Alignment

Bottom Right Alignment

Top Center Alignment

Bottom Center Alignment