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.
exercism / website / app / javascript / components / tooltips / Tooltip.tsx View on Github 
hoverRequestToShow,
focusRequestToShow,
placement = 'right',
focusable = true,
}: TooltipProps): JSX.Element | null => {
const [tooltipElement, setTooltipElement] = useState(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)
}export function usePanel(options?: any) {
const [open, setOpen] = useState(false)
const [buttonElement, setButtonElement] = useState(null)
const [panelElement, setPanelElement] = useState(null)
const { styles, attributes, update } = usePopper(
buttonElement,
panelElement,
options || {
placement: 'bottom-end',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 2],
},
},
],
}
)
const handleMouseDown = useCallback(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 (
<>
setShowPopper(true)}
onMouseLeave={() => setShowPopper(false)}
>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 .', '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)
);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,
);
};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',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 },},
),
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,
);
};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 .', '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
