Neurotic and Probably Misinformed

    react-popover-portal

    0.3.5 • Public • Published

    Build Status

    react-popover-portal

    A simple 'shared' popover that renders to the body. Accelerated translation between nodes.

    npm install -S react-popover-portal

    Demo

    GIF

    Example

    1. Make sure that you have installed packages in root folder and examples folder.
    2. To start webpack dev server, run npm start inside /examples folder.
    3. Navigate to localhost:8080 .

    Usage

    In your React component:

     
    render(){
      return (<div>
          <p onMouseEnter={this.displayPopup} onMouseLeave={this.hidePopup} id='parent'> 
          The parent 
          </p>
     
          <Popover prefix='popup' parent='#parent' open={this.state.open}
              onMouseEnter={this.displayPopup} onMouseLeave={this.hidePopup}>
     
              <div className={'popup-content'}>
                  Popup
              </div>
          </Popover>
          
      </div>);
    }

    Adding onMouseEnter and onMouseLeave to Popover prevents it from disappearing when hovered

    In your CSS file:

    // - With 'popup as prefix'
    .popup {
      background: rgba(0, 0, 0, 0.7);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16)0 3px 6px rgba(0, 0, 0, 0.23);
    }
     
    .popup-content{
      // - Add padding here to the content 
      padding: 10px;
    }

    Do not add margins to children class .popup-content. The onMouseEnter and onMouseLeave does not work on empty space.
    If you set .popup height you also need to make sure the children div is covering the whole area. See issues section below.

    Props

    Prop Description Type Required Default Value
    parent The DOM element to attach the popover to document query required -
    open If the popover should open or not bool required -
    group a string which is used to create independent popups bool not required -
    arrowWidth Size of your carret number not required -
    popupWidth Size of your popup, required if you animate width number not required -
    prefix A prefix used to add classes to the portal node string not required rpp
    timeout The time it takes until popover disappears (ms) number not required 1000
    animationTime The duration of your appear and disappear animations (ms) number not required 350
    translateSpeed The speed of how fast popover translates between parents number not required 300
    translateEase Translate ease of when popover translates between parent string not required 'ease'
    transitions List of transitions {name: opacity , ease: 'linear'} Array of objects not required {name:'all', ease:'ease'}
    offset The offset between the parent and popover (pixels) number not required 10
    onMouseEnter Callback for when the mouse entered the popover content. function not required -
    onMouseLeave Callback for when the mouse leaved the popup content function not required -
    getArrowPosition Callback for arrow positioning (left position) function not required -

    If you are using a carret specify the width with arrowWidth prop.

    Customize

    You are free to customize the popup. react-popover-portal does not care on how your popup looks.
    However you should use the prefix to add styles and animation as it is top level parent.

    Animate

    You can animate the popup when it appears or disappears. Simply add these classes to your CSS (with popup as prefix):

    .popup__hidden{
      opacity: 0;
    }
     
    .popup__active{
      opacity: 1;
    }

    Prefixes {prefix}__active and {prefix}__hidden will be added to the portal node.
    See /examples/src/styles/animated.scss and /examples/src/components/AnimatedPopover.jsx

    Clear all popups

    Use removeAllPopups() to clear all popups from DOM including the portal.
    This will prevent popup from staying when you're navigating with react-router etc (see components/App.jsx in examples).

    Known issues

    • When you set the height of the popup in your CSS file (eg. animating it from 0px to 200px) the children will still have a fixed height. Because the onMouseEnter and onMouseLeave is listening on child events, the popup will close even when the user is hovering the popup. If you need to set the height, simply add display:flex to the popup class and height:100% to the container child to force it to cover the popup.

    • Animating the width is problematic as it is used to calculate popover position before attaching it to the parent. A solution to fix this problem is by passing the final width as a prop.

    Features to add

    • Possible to specify position of the popup relative to parent: 'left', 'bottom', 'top' and 'right'
    • Force the arrow to point to a specific position on the parent, eg parent's right corner.

    Install

    npm i react-popover-portal

    DownloadsWeekly Downloads

    0

    Version

    0.3.5

    License

    MIT

    Last publish

    Collaborators

    • onurhb