react-easy-popper
Installation
npm install react-easy-popper
Usage
import { Popper } from 'react-easy-popper';
...
<Popper
position={['bottom', 'center']}
content={<div style={{ background: 'rgba(0,0,0,0.4)' }}>I'm Popper content.</div>}
>
<button>click me</button>
</Popper>
Props
| Property | Type | Description | Example |
|---|---|---|---|
| position | string[] |
. | ['bottom', 'centner'],['top', 'right'] |
| content | JSX.Element |
. | <div>I'm popper</div> |
| margin | number |
. |
10 (Default: 6) |
| bubble | boolean |
. |
true (Default: false) |
| showOnMount | boolean |
. |
true (Default: false) |
| disabled | boolean |
. |
true (Default: false) |
| children |
JSX.Element or Function
|
. | <button>click me</button> |
| arrow | object |
. | { color, size, distance } |
arrow
| Property | Type | Description | Example |
|---|---|---|---|
| arrow.color | string |
. |
rgba(0,0,0,0.5), red
|
| arrow.size | number |
. |
5, 10, 20
|
| arrow.distance |
string or number
|
. |
10%, 20
|
