How to use react-popper - 9 common examples

To help you get started, we’ve selected a few react-popper 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 exercism / website / app / javascript / components / tooltips / Tooltip.tsx View on Github external
hoverRequestToShow,
  focusRequestToShow,
  placement = 'right',
  focusable = true,
}: TooltipProps): JSX.Element | null => {
  const [tooltipElement, setTooltipElement] = useState<HTMLElement | null>(null)

  const {
    state: { showState },
    dispatch,
    addOpenTooltip,
    removeOpenTooltip,
    closeOtherOpenTooltips,
  } = useStatefulTooltip()

  const popper = usePopper(referenceElement, tooltipElement, {
    placement: placement,
    modifiers: [{ name: 'offset', options: { offset: [0, 8] } }], // offset from the tooltip's reference element
  })

  const { isLoading, isError, htmlContent } = useContentQuery(
    contentEndpoint,
    contentEndpoint,
    showState != 'hidden' && showState != 'error'
  )

  // useEffect for responding to the reference element's request to show when hovered
  useEffect(() => {
    if (hoverRequestToShow) {
      return dispatchRequestShowFromRefHover(dispatch, id)
    }
github exercism / website / app / javascript / hooks / use-panel.tsx View on Github external
export function usePanel(options?: any) {
  const [open, setOpen] = useState(false)
  const [buttonElement, setButtonElement] = useState<HTMLElement | null>(null)
  const [panelElement, setPanelElement] = useState<HTMLDivElement | null>(null)
  const { styles, attributes, update } = usePopper(
    buttonElement,
    panelElement,
    options || {
      placement: 'bottom-end',
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 2],
          },
        },
      ],
    }
  )

  const handleMouseDown = useCallback(
github exercism / website / app / javascript / components / mentoring / Queue / Solution.jsx View on Github external
export function Solution({
  trackTitle,
  trackIconUrl,
  menteeAvatarUrl,
  menteeHandle,
  exerciseTitle,
  isStarred,
  haveMentoredPreviously,
  status,
  updatedAt,
  url,
}) {
  const [referenceElement, setReferenceElement] = useState(null)
  const [popperElement, setPopperElement] = useState(null)
  const [showPopper, setShowPopper] = useState(false)
  const { styles, attributes } = usePopper(referenceElement, popperElement)

  return (
    <>
      <tr
        ref={setReferenceElement}
        onMouseEnter={() => setShowPopper(true)}
        onMouseLeave={() => setShowPopper(false)}
      >
        <td>
          <TrackIcon track={{ title: trackTitle, iconUrl: trackIconUrl }} />
        </td>
        <td>
          <img
            style={{ width: 100 }}
            src={menteeAvatarUrl}
            alt={`avatar for ${menteeHandle}`}
github deranjer / goTorrent / goTorrentWebUI / node_modules / material-ui / Tooltip / Tooltip.js View on Github external
childrenProps.onMouseOver = this.handleRequestOpen;
        childrenProps.onMouseLeave = this.handleClose;
      }

      if (!disableTriggerFocus) {
        childrenProps.onFocus = this.handleRequestOpen;
        childrenProps.onBlur = this.handleClose;
      }

      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', 'Remove this title property `' + childrenProp.props.title + '` or the Tooltip component.'].join('\n')) : void 0;

      return _react2.default.createElement(
        _reactEventListener2.default,
        { target: 'window', onResize: this.handleResize },
        _react2.default.createElement(
          _reactPopper.Manager,
          (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
          _react2.default.createElement(
            _reactPopper.Target,
            null,
            function (_ref2) {
              var targetProps = _ref2.targetProps;
              return _react2.default.createElement(
                _RefHolder2.default,
                {
                  ref: function ref(node) {
                    _this2.children = (0, _reactDom.findDOMNode)(node);
                    targetProps.ref(_this2.children);
                  }
                },
                _react2.default.cloneElement(childrenProp, childrenProps)
              );
github sablierhq / sablier / packages / frontend / src / pages / PayWithSablier / MyReactDatePicker / index.jsx View on Github external
className: classes,
                "data-placement": placement,
              },
            ),
            React.cloneElement(popperComponent, { arrowProps: arrowProps }),
          );
        },
      );
    }

    if (this.props.popperContainer) {
      popper = React.createElement(this.props.popperContainer, {}, popper);
    }

    return React.createElement(
      reactPopper.Manager,
      null,
      React.createElement(reactPopper.Reference, null, function(_ref2) {
        var ref = _ref2.ref;
        return React.createElement("div", { ref: ref, className: "react-datepicker-wrapper" }, targetComponent);
      }),
      popper,
    );
  };
github deranjer / goTorrent / goTorrentWebUI / node_modules / material-ui / Tooltip / Tooltip.js View on Github external
function (_ref2) {
              var targetProps = _ref2.targetProps;
              return _react2.default.createElement(
                _RefHolder2.default,
                {
                  ref: function ref(node) {
                    _this2.children = (0, _reactDom.findDOMNode)(node);
                    targetProps.ref(_this2.children);
                  }
                },
                _react2.default.cloneElement(childrenProp, childrenProps)
              );
            }
          ),
          _react2.default.createElement(
            _reactPopper.Popper,
            (0, _extends3.default)({
              placement: placement,
              eventsEnabled: open,
              className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open), PopperClassName)
            }, PopperOther, {
              ref: function ref(node) {
                _this2.popper = node;
              }
            }),
            function (_ref3) {
              var popperProps = _ref3.popperProps,
                  restProps = _ref3.restProps;

              var actualPlacement = popperProps['data-placement'] || placement;
              return _react2.default.createElement(
                'div',
github sablierhq / sablier / packages / frontend / src / pages / PayWithSablier / MyReactDatePicker / index.jsx View on Github external
PopperComponent.prototype.render = function render() {
    var _props = this.props,
      className = _props.className,
      hidePopper = _props.hidePopper,
      popperComponent = _props.popperComponent,
      popperModifiers = _props.popperModifiers,
      popperPlacement = _props.popperPlacement,
      popperProps = _props.popperProps,
      targetComponent = _props.targetComponent;

    var popper = void 0;

    if (!hidePopper) {
      var classes = classnames("react-datepicker-popper", className);
      popper = React.createElement(
        reactPopper.Popper,
        _extends(
          {
            modifiers: popperModifiers,
            placement: popperPlacement,
          },
          popperProps,
        ),
        function(_ref) {
          var ref = _ref.ref,
            style = _ref.style,
            placement = _ref.placement,
            arrowProps = _ref.arrowProps;
          return React.createElement(
            "div",
            _extends(
              { ref: ref, style: style },
github sablierhq / sablier / packages / frontend / src / pages / PayWithSablier / MyReactDatePicker / index.jsx View on Github external
},
            ),
            React.cloneElement(popperComponent, { arrowProps: arrowProps }),
          );
        },
      );
    }

    if (this.props.popperContainer) {
      popper = React.createElement(this.props.popperContainer, {}, popper);
    }

    return React.createElement(
      reactPopper.Manager,
      null,
      React.createElement(reactPopper.Reference, null, function(_ref2) {
        var ref = _ref2.ref;
        return React.createElement("div", { ref: ref, className: "react-datepicker-wrapper" }, targetComponent);
      }),
      popper,
    );
  };
github deranjer / goTorrent / goTorrentWebUI / node_modules / material-ui / Tooltip / Tooltip.js View on Github external
if (!disableTriggerFocus) {
        childrenProps.onFocus = this.handleRequestOpen;
        childrenProps.onBlur = this.handleClose;
      }

      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', 'Remove this title property `' + childrenProp.props.title + '` or the Tooltip component.'].join('\n')) : void 0;

      return _react2.default.createElement(
        _reactEventListener2.default,
        { target: 'window', onResize: this.handleResize },
        _react2.default.createElement(
          _reactPopper.Manager,
          (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
          _react2.default.createElement(
            _reactPopper.Target,
            null,
            function (_ref2) {
              var targetProps = _ref2.targetProps;
              return _react2.default.createElement(
                _RefHolder2.default,
                {
                  ref: function ref(node) {
                    _this2.children = (0, _reactDom.findDOMNode)(node);
                    targetProps.ref(_this2.children);
                  }
                },
                _react2.default.cloneElement(childrenProp, childrenProps)
              );
            }
          ),
          _react2.default.createElement(

react-popper

Official library to use Popper on React projects

MIT
Latest version published 7 months ago

Package Health Score

84 / 100
Full package analysis