How to use the react-popper.usePopper function in react-popper

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}`}