Your friendly neighborhood open source maintainers. Creators of Skeleton.
800 Followers
120 Following
100 Posts
);
}
```
Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.
## Anchor
Use the `Anchor` component to position the popover contents relative to an element other than the trigger.
```tsx
import { Avatar, Popover, Portal } from '@skeletonlabs/skeleton-react';
import { XIcon } from 'lucide-react';
export default function Anchor() {
return (
Your friendly neighborhood open source maintainers. Creators of Skeleton.
800 Followers
120 Following
100 Posts
);
}
```
## Arrow
Visually connects the popover content to the trigger element. Will automatically align based on the selected side.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Arrow() {
return (
TriggerThis example will have a small arrow.
);
}
```
## Z-Index
By default Skeleton does not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function ZIndex() {
return (
Default (auto)This example will be below the sibling.Above (20)This example will be above the sibling.
Sibling (10)
);
}
```
## Provider Pattern
Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.
```tsx
import { Popover, Portal, usePopover } from '@skeletonlabs/skeleton-react';
export default function Default() {
const popover = usePopover({
closeOnInteractOutside: false,
});
function showAndHide() {
popover.setOpen(true);
setTimeout(() => {
popover.setOpen(false);
}, 3000);
}
return (
AnchorThis popover will appear, stay open for three seconds, then close on it's own.
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
TriggerTitle
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
nesciunt enim.
Close
);
}
```
## Anatomy
Here's an overview of how the Popover component is structured in code:
```tsx
import { Popover, Portal } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference
### Root
| Prop | Description | Type | Default |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| children | - | ReactNode | - |
| translations | Specifies the localized strings that identifies the accessibility elements and their states | IntlTranslations \| undefined | - |
| ids | The ids of the elements in the popover. Useful for composition. | Partial\<\{ anchor: string; trigger: string \| ((value?: string \| undefined) => string); content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> \| undefined | - |
| modal | Whether the popover should be modal. When set to \`true\`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover | boolean \| undefined | false |
| portalled | Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
of the popover content. | boolean \| undefined | true |
| autoFocus | Whether to automatically set focus on the first focusable
content within the popover when opened. | boolean \| undefined | true |
| initialFocusEl | The element to focus on when the popover is opened. | (() => HTMLElement \| null) \| undefined | - |
| closeOnInteractOutside | Whether to close the popover when the user clicks outside of the popover. | boolean \| undefined | true |
| closeOnEscape | Whether to close the popover when the escape key is pressed. | boolean \| undefined | true |
| onOpenChange | Function invoked when the popover opens or closes | ((details: OpenChangeDetails) => void) \| undefined | - |
| positioning | The user provided options used to position the popover content | PositioningOptions \| undefined | - |
| open | The controlled open state of the popover | boolean \| undefined | - |
| defaultOpen | The initial open state of the popover when rendered.
Use when you don't need to control the open state of the popover. | boolean \| undefined | - |
| triggerValue | The controlled trigger value | string \| null \| undefined | - |
| defaultTriggerValue | The initial trigger value when rendered.
Use when you don't need to control the trigger value. | string \| null \| undefined | - |
| onTriggerValueChange | Function called when the trigger value changes. | ((details: TriggerValueChangeDetails) => void) \| undefined | - |
| getRootNode | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => Node \| ShadowRoot \| Document) \| undefined | - |
| dir | The document's text/writing direction. | "ltr" \| "rtl" \| undefined | "ltr" |
| onEscapeKeyDown | Function called when the escape key is pressed | ((event: KeyboardEvent) => void) \| undefined | - |
| onRequestDismiss | Function called when this layer is closed due to a parent layer being closed | ((event: LayerDismissEvent) => void) \| undefined | - |
| onPointerDownOutside | Function called when the pointer is pressed down outside the component | ((event: PointerDownOutsideEvent) => void) \| undefined | - |
| onFocusOutside | Function called when the focus is moved outside the component | ((event: FocusOutsideEvent) => void) \| undefined | - |
| onInteractOutside | Function called when an interaction happens outside the component | ((event: InteractOutsideEvent) => void) \| undefined | - |
| persistentElements | Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event | (() => Element \| null)\[] \| undefined | - |
### Provider
| Prop | Description | Type | Default |
| -------- | ----------- | ---------------------- | ------- |
| value | - | PopoverApi\ | - |
| children | - | ReactNode | - |
### Context
| Prop | Description | Type | Default |
| -------- | ----------- | ---------------------------------------------- | ------- |
| children | - | (popover: PopoverApi\) => ReactNode | - |
### Anchor
| Prop | Description | Type | Default |
| -------- | --------------------------- | -------------------------------------------------------------- | ------- |
| children | - | ReactNode | - |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Trigger
| Prop | Description | Type | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| children | - | ReactNode | - |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | - |
### Positioner
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Content
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Arrow
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### ArrowTip
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Title
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Description
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### CloseTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | - |