# rpopover

> A simple popover component in react

Latest version **1.0.13** (published 2019-11-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install rpopover
pnpm add rpopover
yarn add rpopover
bun add rpopover
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2019-11-19 |
| First published | 2019-07-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | anish.m.prasad |
| Maintainers | anishmprasad |

## Links

- npm: https://www.npmjs.com/package/rpopover
- Repository: https://github.com/anishmprasad/rpopover
- Homepage: https://github.com/anishmprasad/rpopover#readme
- Issues: https://github.com/anishmprasad/rpopover/issues
- npm.io page: https://npm.io/package/rpopover

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Recent versions

- 1.0.13 (latest) — 2019-11-19
- 1.0.12 — 2019-11-18
- 1.0.11 — 2019-11-18
- 1.0.10 — 2019-11-18
- 1.0.9 — 2019-10-20
- 1.0.8 — 2019-09-30
- 1.0.7 — 2019-08-19
- 1.0.6 — 2019-08-11
- 1.0.5 — 2019-07-24
- 1.0.4 — 2019-07-23
- 1.0.3 — 2019-07-22
- 1.0.2 — 2019-07-16
- 1.0.1 — 2019-07-14
- 1.0.0 — 2019-07-14

## README

# rpopover

A simple popover component for React.

### Installation

```
// 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 (
		<svg className='_1GTCc' viewBox='6 0 12 24' height='19' width='18' fill='#686b78'>
			<path d='M11.9923172,11.2463768 C8.81761115,11.2463768 6.24400341,8.72878961 6.24400341,5.62318841 C6.24400341,2.5175872 8.81761115,0 11.9923172,0 C15.1670232,0 17.740631,2.5175872 17.740631,5.62318841 C17.740631,8.72878961 15.1670232,11.2463768 11.9923172,11.2463768 Z M11.9923172,9.27536232 C14.0542397,9.27536232 15.7257581,7.64022836 15.7257581,5.62318841 C15.7257581,3.60614845 14.0542397,1.97101449 11.9923172,1.97101449 C9.93039471,1.97101449 8.25887628,3.60614845 8.25887628,5.62318841 C8.25887628,7.64022836 9.93039471,9.27536232 11.9923172,9.27536232 Z M24,24 L0,24 L1.21786143,19.7101449 L2.38352552,15.6939891 C2.85911209,14.0398226 4.59284263,12.7536232 6.3530098,12.7536232 L17.6316246,12.7536232 C19.3874139,12.7536232 21.1256928,14.0404157 21.6011089,15.6939891 L22.9903494,20.5259906 C23.0204168,20.63057 23.0450458,20.7352884 23.0641579,20.8398867 L24,24 Z M21.1127477,21.3339312 L21.0851024,21.2122487 C21.0772161,21.1630075 21.0658093,21.1120821 21.0507301,21.0596341 L19.6614896,16.2276325 C19.4305871,15.4245164 18.4851476,14.7246377 17.6316246,14.7246377 L6.3530098,14.7246377 C5.4959645,14.7246377 4.55444948,15.4231177 4.32314478,16.2276325 L2.75521062,21.6811594 L2.65068631,22.0289855 L21.3185825,22.0289855 L21.1127477,21.3339312 Z' />
		</svg>
	);
}

export default function PopoverContainer(props) {
	return (
		<div className='popover-container' style={{ overflow: 'hidden', height: '400px' }}>
			<h1 style={{ textAlign: 'center', margin: '40px 0' }}>rpopover</h1>
			<Popover
				buttonComponent={
					<div className='_1fmVk _30y3a'>
						<div>
							<div className='_2CgXb'>
								<a className='_1T-E4'>
									<span className='_3yZyp'>
										<ProfileSvg />
									</span>
									<span className='_1qbcC'>rpopover</span>
								</a>
							</div>
						</div>
					</div>
				}
				dropdownComponent={<div>dropdown components</div>}
				dropdownAlignment='right'
				onHover={false}
				closeOnScroll={false}
				show={true}
			/>
		</div>
	);
}
```

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

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