@lightspeed/cirrus-popover

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