Skip to content

trendmicro-frontend/react-popover

Repository files navigation

react-popover build status Coverage Status

NPM

React Popover

Demo: https://trendmicro-frontend.github.io/react-popover

Installation

  1. Install the latest version of react and react-popover:
npm install --save react @trendmicro/react-popover
  1. At this point you can import @trendmicro/react-popover and its styles in your application as follows:
import Popover from '@trendmicro/react-popover';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-popover/dist/react-popover.css';

Usage

// Basic
<Popover show={true}>
    <Popover.Body>
        <span>Popover Top</span>
    </Popover.Body>
</Popover>

// With Header
<Popover show={true}>
    <Popover.Header>Title</Popover.Header>
    <Popover.Body>
        <span>Popover Top</span>
    </Popover.Body>
</Popover>

// With footer
<Popover show={true}>
    <Popover.Body>
        <span>Popover Top</span>
    </Popover.Body>
    <Popover.Footer>Footer</Popover.Footer>
</Popover>

// Set prefer place
<Popover
    show={true}
    placement="top-left"
>
    <Popover.Body>
        <span>Popover Top-left</span>
    </Popover.Body>
</Popover>

// Set target
<Popover
    show={true}
    target={document.querySelector(".example-target")}
>
    <Popover.Body>
        <span>Popover Top</span>
    </Popover.Body>
</Popover>

API

Properties

Name Type Default Description
show Boolean false Specify whether to show the popover.
placement String 'top' One of
  • 'top'
  • 'top-left'
  • 'top-right'
  • 'right'
  • 'right-top'
  • 'right-bottom'
  • 'bottom'
  • 'bottom-left'
  • 'bottom-right'
  • 'left'
  • 'left-top'
  • 'left-bottom'
target Object null Target element to aligned

License

MIT