# @d8660091/react-popper

> A React component for displaying popper based on popper.js

Latest version **1.0.4** (published 2018-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @d8660091/react-popper
pnpm add @d8660091/react-popper
yarn add @d8660091/react-popper
bun add @d8660091/react-popper
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-06-25 |
| First published | 2018-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Xu Deng |
| Maintainers | d8660091 |
| Keywords | react, popper, popper.js, recompose |

## Links

- npm: https://www.npmjs.com/package/@d8660091/react-popper
- Repository: https://github.com/d8660091/react-popper
- npm.io page: https://npm.io/package/@d8660091/react-popper

## Dependencies (3)

- [popper.js](https://npm.io/package/popper.js.md) ^1.14.3
- [recompose](https://npm.io/package/recompose.md) ^0.27.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## 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

- 1.0.4 (latest) — 2018-06-25
- 1.0.3 — 2018-06-21
- 1.0.2 — 2018-06-21
- 1.0.1 — 2018-06-21
- 1.0.0 — 2018-06-21
- 0.7.6 — 2018-06-20
- 0.7.5 — 2018-06-20
- 0.7.4 — 2018-06-20
- 0.7.3 — 2018-03-16
- 0.7.2 — 2018-03-16
- 0.7.1 — 2018-03-01
- 0.6.2 — 2018-02-22
- 0.6.1 — 2018-02-08
- 0.6.0 — 2018-02-06
- 0.5.2 — 2018-01-29
- … 16 more at https://npm.io/package/@d8660091/react-popper/versions

## README

# React Popper

[![CircleCI](https://circleci.com/gh/d8660091/react-popper.svg?style=svg)](https://circleci.com/gh/d8660091/react-popper)
[![npm version](https://badge.fury.io/js/%40d8660091%2Freact-popper.svg)](https://badge.fury.io/js/%40d8660091%2Freact-popper)
[![dependencies Status](https://david-dm.org/d8660091/react-popper/status.svg)](https://david-dm.org/d8660091/react-popper)

React [popper.js](https://github.com/FezVrasta/popper.js) component.

**Features**:
* Easy to use, check the usage below.
* React to props change, re-render the popper when options change.
* Nestable, for example, there can be two popup windows respond to _mouseenter_ and _click_ events of a button separately.

[Try it](https://d8660091.github.io/react-popper/)

## Usage

Install with yarn:

``` shell
yarn add @d8660091/react-popper
```

Or npm:

``` shell
npm install @d8660091/react-popper -P
```

Import in your source file:

``` jsx
import Popper from '@d8660091/react-popper'

// A simple popper
<Popper
  options={{ 
    placement: 'bottom'
  }}
  renderRef={({ setReference, toggle }) => (
    <span ref={setReference} onClick={toggle}>
      Popover Trigger
    </span>
  )}>
  <div>Popper content</div>
</Popper>

// A nested popper
<Popper
  options={{
    placement: 'right',
  }}
  renderRef={({ setReference, open, close, isOpened }) => (
    <Popper
      options={{
        placement: 'bottom',
      }}
      renderRef={({
        setReference: setInnerReference,
        toggle: innerToggle,
        isOpened: isInnerOpened
      }) => (
        <button
          ref={el => {
            setReference(el)
            setInnerReference(el)
          }}
          onClick={() => {
            close()
            innerToggle()
          }}
          onMouseEnter={() => {
            !isInnerOpened && open()
          }}
          onMouseLeave={() => {
            close()
          }}>
          A button which triggers two popper, one on hover, one on click
        </button>
      )}>
      <div>
        On click inner popper.
      </div>
    </Popper>
  )}>
  <div>
    On hover outer popper content.
  </div>
</Popper>
```

Types (index.d.ts):

``` typescript
declare module '@d8660091/react-popper' {
  import { PopperOptions } from 'popper.js'
  import * as React from 'react'

  interface RenderProps extends PopperProps {
    setReference: React.Ref<HTMLElement>
    setPop: React.Ref<HTMLElement>
    isOpened: boolean
    open: () => void
    close: () => void
    toggle: () => void
  }

  type PopperProps = {
    renderRef: (props: RenderProps) => React.ReactNode
    renderPop?: (props: RenderProps) => React.ReactNode
    options?: PopperOptions
    children?: React.ReactNode
    canClickOutside?: Boolean // default: false
    style?: Object
    className?: string
    defaultIsOpened?: Boolean // default: false
  }

  const Popper: React.ComponentClass<PopperProps>

  export default Popper
}
```

* options: popper.js [options](https://popper.js.org/popper-documentation.html#defaults).
* renderRef: the function to render reference, i.e, the element used to position the popper.
* children: content inside the popper.
* canClickOutside: if true, popper will not hide itself when users click outside.
* style and className: goes to the popper instead of the reference.
* renderPop: if this function is set, the children, style and className will be ignored and the popper will be rendered using this function.
* defaultIsOpened: whether open popper when it mounts

## ClickableArea
You can click ClickableArea without closing popper, which is useful when you have an interactable Popper rendered by another parent Popper.

``` jsx
import { ClickableArea } from '@d8660091/react-popper'

<ClickableArea>
  clickable text
</ClickableArea>
```


[**Storybook**](https://github.com/d8660091/react-popper/blob/master/.storybook/index.js) - More usages, including specifying options, styles and nesting. You can also play with the components by live editing the options and placements.

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