ElementPopper

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

Installation

$3

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

$3

`code
yarn add react-element-popper
`

Demo

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 (
style={{
width: size + "px",
height: size + "px",
backgroundColor,
textAlign: "center",
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
{children}


return (
element={

Refrence Element

}
popper={

Popper Element

}
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








rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/element_popper.css"
/>



id="elementPopper"
style="
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
"
/>




``