react-popover

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

2. 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