How to use the react-portal.Portal function in react-portal

To help you get started, we’ve selected a few react-portal examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bootstrap-styled / v4 / lib / Modal / index.js View on Github external
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, {
github bootstrap-styled / v4 / lib / Modal / index.js View on Github external
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)
        }))));
      }

react-portal

To make your life with React Portals easier.

MIT
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis