Install
$ npm install react-simple-popover
Usage
import Popover from 'react-simple-popover';
import React, { Component } from 'react';
class PopoverDemo extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
handleClick(e) {
this.setState({open: !this.state.open});
}
handleClose(e) {
this.setState({open: false});
}
render() {
return (
<div>
<a
href="#"
className="button"
ref="target"
onClick={this.handleClick.bind(this)}>Popover</a>
<Popover
placement='left'
container={this}
target={this.refs.target}
show={this.state.open}
onHide={this.handleClose.bind(this)} >
<p>This is popover</p>
</Popover>
</div>
);
}
}
Options
placementOne of
left
, right
, bottom
or top
.show
Boolean,
true
if popover is shown; false
otherwise.onHide
Hide callback function.
target
Target ref to align popover around target element.
container
Reference to the component that represents the context
hideWithOutsideClick
Boolean,
true
if popover should hide when clicked outside; false
otherwise.containerStyle
Style for outermost container
style
Style for the content's container
Author
Ismail Demirbilek - @dbtekMIT Licensed