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:

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

• Minification
• Documentation
• CSS Polishing and Transitions
• Production Level

License

Apache 2.0