react-simple-popover

    0.2.4 • Public • Published

    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="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

    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

    Keywords

    none

    Install

    npm i react-simple-popover

    DownloadsWeekly Downloads

    2,380

    Version

    0.2.4

    License

    MIT

    Last publish

    Collaborators

    • dbtek