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
Name | Type | Description | Required | Default Value |
---|---|---|---|---|
anchorRef | React.RefObject<HTMLElement | null> | Reference to the element the popover is positioned relative to | Yes | - |
display | boolean | Whether the popover is visible | Yes | - |
children | React.ReactNode | Content to be displayed inside the popover | No | - |
alignment | "bottom-left" | "bottom-right" | "bottom-center" | "top-left" | "top-right" | "top-center" | Position of the popover relative to the anchor element | No | - |
onClickOutside | () => void | Callback function when clicking outside the popover | No | - |
popoverContainerStyle | React.CSSProperties | Custom styles to apply to the popover container | No | - |