# react-element-popper

> A small React component to create a variety of elements that require Popper, such as dropdowns, modals, multiselects, and more.

Latest version **2.1.7** (published 2024-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-element-popper
pnpm add react-element-popper
yarn add react-element-popper
bun add react-element-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 | 2.1.7 |
| Published | 2024-07-27 |
| First published | 2021-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | shahab yazdi |
| Maintainers | shahabyazdi |
| Keywords | react, element, popper, position, component, dropdown |

## Links

- npm: https://www.npmjs.com/package/react-element-popper
- Repository: https://github.com/shahabyazdi/react-element-popper
- Homepage: https://github.com/shahabyazdi/react-element-popper#readme
- Issues: https://github.com/shahabyazdi/react-element-popper/issues
- npm.io page: https://npm.io/package/react-element-popper

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

- 2.1.7 (latest) — 2024-07-27
- 2.1.6 — 2021-09-15
- 2.1.5 — 2021-09-12
- 2.1.4 — 2021-09-10
- 2.1.3 — 2021-09-10
- 2.1.2 — 2021-09-10
- 2.1.1 — 2021-09-10
- 2.1.0 — 2021-09-10
- 2.0.0 — 2021-07-17
- 1.0.10 — 2021-05-26
- 1.0.8 — 2021-03-24
- 1.0.7 — 2021-02-28
- 1.0.6 — 2021-02-23
- 1.0.5 — 2021-02-22
- 1.0.4 — 2021-02-22
- … 4 more at https://npm.io/package/react-element-popper/versions

## README

# ElementPopper

A small React component to create a variety of elements that require Popper, such as dropdowns, modals, multiselects, and more.

<div align="center">
  <img src="https://github.com/shahabyazdi/react-element-popper/blob/master/screenshot/screenshot.jpg?raw=true" alt="Element Popper"/>
</div>

## Installation

### npm

```code
npm install --save react-element-popper
```

### yarn

```code
yarn add react-element-popper
```

## Demo

[https://shahabyazdi.github.io/react-element-popper/](https://shahabyazdi.github.io/react-element-popper/)

## Usage

```javascript
import React from "react";
import ElementPopper from "react-element-popper";
import "react-element-popper/build/element_popper.css"; // arrow styles and shadow

export default function Example() {
  const Component = ({ size, backgroundColor, children }) => {
    return (
      <div
        style={{
          width: size + "px",
          height: size + "px",
          backgroundColor,
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        {children}
      </div>
    );
  };

  return (
    <ElementPopper
      element={
        <Component size="80" backgroundColor="red">
          Refrence Element
        </Component>
      }
      popper={
        <Component size="100" backgroundColor="white">
          Popper Element
        </Component>
      }
      arrow
      popperShadow
    />
  );
}
```

## Availble props

| Name                |             Type              |     Default     |
| ------------------- | :---------------------------: | :-------------: |
| element             |      React.ReactElement       |                 |
| popper              |      React.ReactElement       |                 |
| position            |            String             | "bottom-center" |
| arrow               | Boolean or React.ReactElement |      false      |
| fixMainPosition     |            Boolean            |      false      |
| fixRelativePosition |            Boolean            |      false      |
| animations          |             Array             |       []        |
| popperShadow        |            Boolean            |      false      |
| active              |            Boolean            |      true       |
| offsetY             |            Number             |        0        |
| offsetX             |            Number             |        0        |
| zIndex              |            Number             |        0        |
| containerStyle      |      React.CSSProperties      |                 |
| arrowStyle          |      React.CSSProperties      |                 |
| containerClassName  |            String             |                 |
| arrowClassName      |            String             |                 |
| ref                 |        React.RefObject        |                 |
| onChange            |           Function            |                 |
| portal              |            Boolean            |      false      |
| portalTarget        |          HTMLElement          |                 |

## Availble Positions

| Position     |  Alternative  |
| ------------ | :-----------: |
| top          |  top-center   |
| bottom       | bottom-center |
| left         |  left-center  |
| right        | right-center  |
| top-start    |   top-left    |
| top-end      |   top-right   |
| bottom-start |  bottom-left  |
| bottom-end   | bottom-right  |
| left-start   |   left-top    |
| left-end     |  left-bottom  |
| right-start  |   right-top   |
| right-end    | right-bottom  |

## Browser (none react-app)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- React -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    <!-- Element Popper -->
    <script src="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/browser.min.js"></script>

    <!-- Optional Style -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/element_popper.css"
    />
    <title>React Element Popper</title>
  </head>
  <body>
    <div
      id="elementPopper"
      style="
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      "
    />
  </body>

  <script>
    function Component({ size, backgroundColor, children }) {
      return React.createElement(
        "div",
        {
          style: {
            width: size + "px",
            height: size + "px",
            backgroundColor,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            textAlign: "center",
          },
        },
        children
      );
    }

    ReactDOM.render(
      React.createElement(ElementPopper, {
        element: React.createElement(
          Component,
          {
            size: 80,
            backgroundColor: "red",
          },
          "Refrence Element"
        ),
        popper: React.createElement(
          Component,
          {
            size: 100,
            backgroundColor: "white",
          },
          "Popper Element"
        ),
        popperShadow: true,
        arrow: true,
      }),
      document.getElementById("elementPopper")
    );
  </script>
</html>
```

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