@chakra-xui/popover
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

@chakra-xui/popover

Popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

Installation

yarn add @chakra-xui/popover

# or

npm i @chakra-xui/popover

Import components

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from "@chakra-xui/react"

Basic Usage

When using this component, ensure the children passed to PopoverTrigger is focusable, user can tab to it using their keyboard, and it can take a ref. It is critical for accessiblity.

A11y: When the Popover opens, focus is sent to the PopoverContent. When it closes, focus is returned to the trigger.

<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverCloseButton />
    <PopoverHeader>Confirmation!</PopoverHeader>
    <PopoverBody>Are you sure you want to have that milkshake?</PopoverBody>
  </PopoverContent>
</Popover>

Rendering the Popover in a Portal

By default, the Popover doesn't render in a Portal. To make them display in a portal, pass the usePortal prop.

You might need to Inspect Element to see this in action. Notice the PopoverContent is rendered as a child of <body>

<Popover usePortal>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>Header</PopoverHeader>
    <PopoverCloseButton />
    <PopoverBody>
      <Button colorScheme="blue">Button</Button>
    </PopoverBody>
    <PopoverFooter>This is the footer</PopoverFooter>
  </PopoverContent>
</Popover>

Package Sidebar

Install

npm i @chakra-xui/popover

Weekly Downloads

0

Version

1.0.4

License

MIT

Unpacked Size

116 kB

Total Files

18

Last publish

Collaborators

  • meabed