react-popover-portal

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

npm install -S react-popover-portal

Demo

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.