VTEX Components Popover

Elementary popover component that can be reused by all VTEX Styleguides. You can use reakit full features (except the 'as' prop) and theme-ui's sx. It renders a popover element by default.

This is a styled base component, so any system can theme it. To customize this component, you just need to add the popover variant in your theme (check the theming section).

Install

yarn add @vtex-components/popover

or

npm install @vtex-components/popover

Usage

import { Popover, usePopoverState } from '@vtex-components/popover'

function UseCase() {
  const popover = usePopoverState()

  return (
    <Popover
      {...popover}
      disclosure={<button>Open popover</button>}
    >
      <p>This is a Popover</p>
    </Popover>
  )
}

With arrow

If you want your popover to have an arrow, you can pass it to the popover as a prop. On the following example, it's shown how you can use the Reakit Reakit PopoverArrow with the popover, but you can design any arrow you want. The popover state is passed to the arrow, so you can access the placement and visibility of the popover.

🎨 Theming

| Modifier | Description | | -------- | ------------------- | | styles | base styles |

Example

You can define the theme with:

const theme = {
  popover: {
    backgroundColor: 'white',
    padding: 3,
    ...
  },
}

Props

| prop | type | description | default | required | | ---------- | ----------- | ----------------------------------------------------- | ------- | -------- | | children | ReactNode | Popover content element | - | ✔️ | | disclosure | ReactNode | Element that triggers the popover | - | ✔️ | | placement | Placement | The placement of the popover relative to its children | top | 🚫 | | arrow | ReactNode | Arrow element, if you want your popover to have an arrow | - | 🚫 | | visible | boolean | Whether the popover is visible or not | - | 🚫 | | sx | SxStyleProp | Theme-ui style prop | - | 🚫 |

PopoverSize = 'small' | 'regular'
Placement = "auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"