@radix-ui/react-popover

What is @radix-ui/react-popover?

The @radix-ui/react-popover package is a part of the Radix UI component library, which provides unstyled, accessible components for building high-quality design systems and web applications. The react-popover component is specifically designed to create a floating, popover dialog that appears next to a target element. It is highly customizable and can be used for various UI patterns like tooltips, dropdowns, and more.

What are @radix-ui/react-popover's main functionalities?

Basic Popover

This code demonstrates how to create a basic popover component. A button is used as the trigger, and when clicked, the popover content is displayed.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <PopoverContent>\n        This is the content of the popover.\n      </PopoverContent>\n    </Popover>\n  );\n}"}

Positioning

This example shows how to position the popover above the trigger button and align it in the center. The `side` and `align` props are used for positioning.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <PopoverContent side='top' align='center'>\n        This popover appears above the button.\n      </PopoverContent>\n    </Popover>\n  );\n}"}

Customization

This code snippet demonstrates how to customize the appearance of the popover content using CSS-in-JS (in this case, with Stitches). A custom styled component `StyledPopoverContent` is created and used instead of the default `PopoverContent`.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\nimport { styled } from '@stitches/react';\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  backgroundColor: 'white',\n  borderRadius: '4px',\n  boxShadow: '0 2px 10px rgba(0,0,0,0.1)'\n});\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <StyledPopoverContent>\n        This popover has custom styles.\n      </StyledPopoverContent>\n    </Popover>\n  );\n}"}

Other packages similar to @radix-ui/react-popover

react-tiny-popover

react-tiny-popover is a lightweight popover component for React. It offers similar functionality to @radix-ui/react-popover, providing a floating dialog next to a target element. However, it focuses more on being minimal and lightweight, potentially offering better performance for simple use cases.

react-tooltip

react-tooltip is another library that provides tooltip functionality, which can be considered a specific use case of popovers. While it shares the floating UI element concept with @radix-ui/react-popover, react-tooltip is more specialized towards tooltips, offering features like delayed show/hide, multiple positions, and effects out of the box.

README

react-popover

Installation

$ yarn add @radix-ui/react-popover
# or
$ npm install @radix-ui/react-popover

Usage

View docs here.