https://github.com/shahabyazdi/react-element-popper
A small React component to create a variety of elements that require Popper, such as dropdowns, modals, multi selects, and more.
https://github.com/shahabyazdi/react-element-popper
component dropdown element modal multiselect popper position react
Last synced: 8 months ago
JSON representation
A small React component to create a variety of elements that require Popper, such as dropdowns, modals, multi selects, and more.
- Host: GitHub
- URL: https://github.com/shahabyazdi/react-element-popper
- Owner: shahabyazdi
- License: mit
- Created: 2021-02-01T08:52:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-27T03:05:23.000Z (over 3 years ago)
- Last Synced: 2025-09-06T13:37:27.544Z (9 months ago)
- Topics: component, dropdown, element, modal, multiselect, popper, position, react
- Language: JavaScript
- Homepage: https://shahabyazdi.github.io/react-element-popper/
- Size: 2.83 MB
- Stars: 11
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ElementPopper
A small React component to create a variety of elements that require Popper, such as dropdowns, modals, multiselects, and more.
## 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 (
{children}
);
};
return (
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
React Element Popper
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")
);
```