# use-popper

> ![npm](https://img.shields.io/npm/dt/use-popper.svg) ![npm](https://img.shields.io/npm/v/use-popper.svg) ![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)

Latest version **1.1.6** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-popper
pnpm add use-popper
yarn add use-popper
bun add use-popper
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2019-10-01 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alexsandiyarov |

## Links

- npm: https://www.npmjs.com/package/use-popper
- npm.io page: https://npm.io/package/use-popper

## Dependencies (2)

- [popper.js](https://npm.io/package/popper.js.md) 1.15.0
- [use-deep-compare](https://npm.io/package/use-deep-compare.md) 0.1.0

## Recent versions

- 1.1.6 (latest) — 2019-10-01
- 1.1.5 — 2019-07-19
- 1.1.4 — 2019-06-30
- 1.1.3 — 2019-05-18
- 1.1.2 — 2019-04-04
- 1.1.1 — 2019-03-30
- 1.1.0 — 2019-03-28
- 1.0.0 — 2019-03-27
- 0.0.3 — 2019-03-23
- 0.0.2 — 2019-03-23
- 0.0.1 — 2019-03-23
- 0.0.0 — 2019-03-23

## README

# Use Popper

![npm](https://img.shields.io/npm/dt/use-popper.svg)
![npm](https://img.shields.io/npm/v/use-popper.svg)
![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh
npm i use-popper
```

### Or with yarn

```sh
yarn add use-popper
```

[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ww293zr265?fontsize=14)

```js
import React from 'react';
import usePopper from 'use-popper';
import { useHover } from 'use-events';

function Tooltip(props) {
  const { reference, popper, arrow } = usePopper({ placement: 'bottom' });
  const [active, bind] = useHover();

  return (
    <div>
      <button ref={reference.ref} {...bind}>
        hover me
      </button>
      {active && (
        <div
          ref={popper.ref}
          style={popper.styles}
          data-placement={popper.placement}
        >
          <div>Hello!</div>
          <div ref={arrow.ref} style={arrow.styles} />
        </div>
      )}
    </div>
  );
}

export default Tooltip;
```

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