How to use react-portal - 5 common examples

role: role,
          tabIndex: '-1'
        };

        var hasTransition = this.props.fade;
        var modalTransition = _extends({}, _Fade.defaultProps, this.props.modalTransition, {
          baseClass: hasTransition ? this.props.modalTransition.baseClass : '',
          timeout: hasTransition ? this.props.modalTransition.timeout : 0
        });
        var backdropTransition = _extends({}, _Fade.defaultProps, this.props.backdropTransition, {
          baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',
          timeout: hasTransition ? this.props.backdropTransition.timeout : 0
        });

        return _react2.default.createElement(
          _reactPortal.Portal,
          { node: this._element },
          _react2.default.createElement(
            'div',
            { className: (0, _mapToCssModules2.default)(this.props.className) },
            _react2.default.createElement(
              _Fade2.default,
              _extends({}, modalAttributes, modalTransition, {
                'in': isOpen,
                onEntered: this.onOpened,
                onExited: this.onClosed,
                cssModule: cssModule,
                className: (0, _mapToCssModules2.default)((0, _classnames2.default)('modal', modalClassName), cssModule)
              }),
              this.renderModalDialog()
            ),
            _react2.default.createElement(_Fade2.default, _extends({}, backdropTransition, {

role: role,
          tabIndex: '-1'
        };
        var hasTransition = this.props.fade;

        var modalTransition = _objectSpread({}, _Fade.defaultProps, this.props.modalTransition, {
          baseClass: hasTransition ? this.props.modalTransition.baseClass : '',
          timeout: hasTransition ? this.props.modalTransition.timeout : 0
        });

        var backdropTransition = _objectSpread({}, _Fade.defaultProps, this.props.backdropTransition, {
          baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',
          timeout: hasTransition ? this.props.backdropTransition.timeout : 0
        });

        return _react.default.createElement(_reactPortal.Portal, {
          node: this._element
        }, _react.default.createElement("div", {
          className: (0, _mapToCssModules.default)(this.props.className)
        }, _react.default.createElement(_Fade.default, _extends({}, modalAttributes, modalTransition, {
          in: isOpen,
          onEntered: this.onOpened,
          onExited: this.onClosed,
          cssModule: cssModule,
          className: (0, _mapToCssModules.default)((0, _classnames.default)('modal', modalClassName), cssModule)
        }), this.renderModalDialog()), _react.default.createElement(_Fade.default, _extends({}, backdropTransition, {
          in: isOpen && !!backdrop,
          cssModule: cssModule,
          className: (0, _mapToCssModules.default)((0, _classnames.default)('modal-backdrop', backdropClassName), cssModule)
        }))));
      }

/**
   * Set positioning priority template
   */
  slidePriority: PropTypes.arrayOf(
    PropTypes.oneOf([
      'slideOnCurrentEdge',
      'slideOnOppositeEdge',
      'slideOnAdjacentEdge',
      'changeType',
    ]),
  ),
  /**
   * Specify function to call on overflow
   */
  onOverflow: PropTypes.func,
  ...Portal.propTypes,
  children: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.element,
  ]).isRequired,
};

const defaultProps = {
  parent: window,
  wrapper: window,
  positionStyle: 'absolute',
  visible: false,
  positionX: 'left',
  positionY: 'top',
  type: 'inner',
  direction: 'horizontal',
  overflowMargin: -5,

/**
 * @author Dmitriy Malakhov
 */

'use strict';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Portal from 'react-portal';
import pick from 'lodash.pick';
import throttle from 'lodash.throttle';

import { noop } from 'reactackle-core';

const SCROLL_THROTTLE_DELAY = 20;
const keysPortalPropTypes = Object.keys(Portal.propTypes);

const propTypes = {
  /**
   * Define the element to which the component will be positioned
   */
  parent: PropTypes.object,
  /**
   * Define boundaries to which the component will be positioned
   */
  wrapper: PropTypes.object,
  /**
   * Determines css position property. We recommend to use 'absolute'
   * positioning as it requires less calculations and is more effective.
   */
  positionStyle: PropTypes.oneOf(['fixed', 'absolute']),
  /**

type: 'inner',
  direction: 'horizontal',
  overflowMargin: -5,
  allowedShowByCenter: false,
  slidePriority: [
    'slideOnAdjacentEdge',
    'changeType',
    'slideOnOppositeEdge',
    'slideOnCurrentEdge',
  ],
  allowedSlideOnCurrentEdge: true,
  allowedSlideOnOppositeEdge: true,
  allowedSlideOnAdjacentEdge: false,
  allowedChangeType: false,
  onOverflow: noop,
  ...Portal.defaultProps,
};

let autoPositionInstances = [];

export default class AutoPosition extends Component {
  constructor(props) {
    super(props);

    this._domNode = null;

    this.state = {
      visible: props.visible,
      currentPosition: {
        top: null,
        left: null,
      },