Popover

Popover with content that appears when clicking on a target element.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-popover

Or using npm:

npm i -S @lightspeed/cirrus-popover

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-popover/Popover.scss';

React Component

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | children | react.node | required | Content to display inside the popover | | placement| string | bottom-start | Position of the Popover in relation with the targeted element. | | target | function | required | Target that will toggle the popover. Must return a React element that will be rendered. The function receives the following props: ({ targetProps: object, targetEvents: object, active: boolean }). targetProps and targetEvents are required to be passed to the target. Uses the render props pattern | | light | boolean | undefined | Displays popover on a light background | | noArrow | boolean | undefined | Doesn't show arrow for the popover | | isOpen | boolean | false | Opened and closed state | | isFlipEnabled | boolean | true | When enabled the popover repositions itself based on the screen size | | onOpen | function | () => {} | Called when the popover is opened | | onClose | function | () => {} | Called when the popover is closed | | autoClose | boolean | true | Whether the component should call onClose when clicking outside of the popover |

Example

import React from 'react';
import Popover from '@lightspeed/cirrus-popover';

const MyComponent = () => (
  <div>
    <Popover
      target={({ targetProps, targetEvents }) => (
        <button {...targetProps} {...targetEvents}>
          Target {active && '(is active)'}
        </button>
      )}
    >
      <div>
        Content
      </div>
    </Popover>
  </div>
);

export default MyComponent;

CSS Component

You can use CSS classes along with popper.js (the library used by the React component) to enable popovers outside a React application. Here's the available classes:

| Type | Class | | ---- | ----- | | box | .cr-popover | | placement | [data-placement="top"] | | light | .cr-popover--light | | arrow | .cr-popover__arrow |