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

License

MIT