@lightspeed/cirrus-popover NPM

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: