🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Totally controlled popover component based on React Overlays.

Others React

Documentation

React Simple Popover

Totally controlled popover component based on React Overlays.

Demo

Try yourself

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={(node) => { this.target = node }}           onClick={this.handleClick}>Popover</a>         <Popover           placement='left'           container={this}           target={this.target}           show={this.state.open}           onHide={this.handleClose} >           <p>This is popover</p>         </Popover>       </div>     );   } }

Options

placement
One 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 - @dbtek
MIT Licensed


You May Also Like