# @trendmicro/react-popover

> React Popover

Latest version **0.4.0** (published 2018-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @trendmicro/react-popover
pnpm add @trendmicro/react-popover
yarn add @trendmicro/react-popover
bun add @trendmicro/react-popover
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2018-02-12 |
| First published | 2017-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 69.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Mark Lin |
| Maintainers | cheton, rothpeng, trendmicro-frontend, xjkit |
| Keywords | react, react-popover |

## Links

- npm: https://www.npmjs.com/package/@trendmicro/react-popover
- Repository: https://github.com/trendmicro-frontend/react-popover
- Issues: https://github.com/trendmicro-frontend/react-popover/issues
- npm.io page: https://npm.io/package/@trendmicro/react-popover

## Dependencies (3)

- [rc-align](https://npm.io/package/rc-align.md) ~2.3.5
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2018-02-12
- 0.2.3 — 2017-12-06
- 0.2.2 — 2017-10-31
- 0.2.1 — 2017-10-06
- 0.2.0 — 2017-09-18
- 0.1.0 — 2017-09-14

## README

# react-popover [![build status](https://travis-ci.org/trendmicro-frontend/react-popover.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-popover) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-popover/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-popover?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-popover.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-popover/)

React Popover

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

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-popover](https://github.com/trendmicro-frontend/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:

  ```js
  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

```js
// 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

<table>
    <thead>
        <tr>
            <th align="left">Name</th>
            <th align="left">Type</th>
            <th align="left">Default</th>
            <th align="left">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>show</td>
            <td>Boolean</td>
            <td>false</td>
            <td>Specify whether to show the popover.</td>
        </tr>
        <tr>
            <td>placement</td>
            <td>String</td>
            <td>'top'</td>
            <td>
                One of
                <ul>
                    <li>'top'</li>
                    <li>'top-left'</li>
                    <li>'top-right'</li>
                    <li>'right'</li>
                    <li>'right-top'</li>
                    <li>'right-bottom'</li>
                    <li>'bottom'</li>
                    <li>'bottom-left'</li>
                    <li>'bottom-right'</li>
                    <li>'left'</li>
                    <li>'left-top'</li>
                    <li>'left-bottom'</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>target</td>
            <td>Object</td>
            <td>null</td>
            <td>Target element to aligned</td>
        </tr>
  </tbody>
</table>

## License

MIT

---
_Source: https://npm.io/package/@trendmicro/react-popover · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._