https://github.com/anishmprasad/rpopover
A lightweight popover component for react.
https://github.com/anishmprasad/rpopover
popover react react-popover react-popup reactjs
Last synced: about 1 year ago
JSON representation
A lightweight popover component for react.
- Host: GitHub
- URL: https://github.com/anishmprasad/rpopover
- Owner: anishmprasad
- License: apache-2.0
- Created: 2019-07-14T12:39:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T17:37:12.000Z (over 3 years ago)
- Last Synced: 2025-03-29T10:12:18.766Z (over 1 year ago)
- Topics: popover, react, react-popover, react-popup, reactjs
- Homepage:
- Size: 71.3 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rpopover
A simple popover component for React.
### Installation
```
// with npm
$ npm install react-extensions --save
// with yarn
$ yarn add react-extensions
// with npm
$ npm install rpopover --save
// with yarn
$ yarn add rpopover
```
### Usage
Here is a quick example to get you started, **it's all you need**:
```jsx
import Popover from 'rpopover';
import 'rpopover/styles.min.css';
function ProfileSvg() {
return (
);
}
export default function PopoverContainer(props) {
return (
}
dropdownComponent={dropdown components}
dropdownAlignment='right'
onHover={false}
closeOnScroll={false}
show={true}
/>
);
}
```
### Props
| Name | Type | Required | Description |
| ---------------------- | ---------- | -------- | ------------------------------------ |
| containerClass | `string` | `true` | custom class for container |
| buttonComponent | `string` | `true` | the component for button |
| buttonComponentClass | `string` | `true` | custom class for button |
| dropdownComponent | `object` | `true` | the component for dropdown |
| dropdownComponentClass | `object` | `true` | custom class for dropdown |
| dropdownAlignment | `object` | `true` | the component for dropdown alignment |
| onHover | `boolean` | `true` | option for onHover |
| closeOnScroll | `boolean` | `true` | option for closeOnScroll |
| show | `boolean` | `true` | option for show |
| caret | `boolean` | `true` | enable caret in popover |
### TODO
- [x] Minification
- [x] Documentation
- [x] CSS Polishing and Transitions
- [x] Production Level
### License
Apache 2.0