bpk-component-popover-css

bpk-component-popover

Backpack popover component.

Installation

npm install bpk-component-popover --save-dev

Usage

import React, { Component } from 'react';
import BpkButton from 'bpk-component-button';
import BpkPopover from 'bpk-component-popover';
import BpkText from 'bpk-component-text';

class App extends Component {
  constructor() {
    super();

    this.state = {
      isOpen: false,
    };

  }

  openPopover = () => {
    this.setState({
      isOpen: true,
    });
  }

  closePopover = () => {
    this.setState({
      isOpen: false,
    });
  }

  render() {
    return (
      <div id="popover-container">
        <BpkPopover
          id="my-popover"
          target={
            <BpkButton onClick={this.openPopover}>Open</BpkButton>
          }
          onClose={this.closePopover}
          isOpen={this.state.isOpen}
          label="My popover"
          closeButtonText="Close"
          renderTarget={() =>
            document.getElementById('popover-container')
          }
          closeButtonProps={{
            tabIndex: 0,
          }}
        >
          <BpkText>My popover content</BpkText>
        </BpkPopover>
      </div>
    );
  }
}

Theming: In order to theme the modal, a renderTarget needs to be supplied as a function which returns a DOM node in the scope of a BpkThemeProvider.

Props

Property	PropType	Required	Default Value
children	node	true	-
closeButtonText	string	true	-
id	string	true	-
isOpen	bool	true	-
label	string	true	-
onClose	func	true	-
target	element or func	true	-
closeButtonIcon	bool	false	true
closeButtonProps	object	false	null
labelAsTitle	bool	false	false
padded	bool	false	true
placement	oneOf(['top', 'right', 'bottom', 'left'])	false	'bottom'
popperModifiers	object	false	null
portalClassName	string	false	null
portalStyle	object	false	null
renderTarget	func	false	null

In order to attach the popover to a regular DOM element, provide a function which returns it to target:

<BpkPopover
  id="my-popover"
  target={() => document.getElementById('mydiv')}
  onClose={this.closePopover}
  isOpen={this.state.isOpen}
  label="My popover"
  closeButtonText="Close"
>
  <BpkText>My popover content</BpkText>
</BpkPopover>

Prop Details

onClose

const onClose = (event, {
  source: <string>, // One of `DOCUMENT_CLICK`, `CLOSE_BUTTON`, `CLOSE_LINK`, `ESCAPE`
}) => {
  ...
}

popperModifiers

Please refer to the documentation for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the popover to overflow the viewport etc.

Theme Props

• linkColor
• linkHoverColor
• linkActiveColor
• linkVisitedColor