react-popper

Tooltip positioning

This code demonstrates how to use the `usePopper` hook to create a tooltip that is positioned relative to a button. The tooltip's position is automatically updated to ensure it remains correctly placed relative to the button, even if the layout changes.

{"import React from 'react';\nimport { usePopper } from 'react-popper';\n\nfunction Tooltip() {\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const { styles, attributes } = usePopper(referenceElement, popperElement);\n\n  return (\n    <>\n      <button ref={setReferenceElement}>Hover over me</button>\n      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>\n        Tooltip content\n      </div>\n    </>\n  );\n}"}

Dropdown menu

This example shows how to create a dropdown menu using `usePopper`. The dropdown's visibility is toggled by clicking a button, and its position is dynamically adjusted to stay aligned with the button.

{"import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nfunction Dropdown() {\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const [visible, setVisible] = useState(false);\n  const { styles, attributes } = usePopper(referenceElement, popperElement);\n\n  return (\n    <>\n      <button ref={setReferenceElement} onClick={() => setVisible(!visible)}>Toggle Dropdown</button>\n      {visible && (\n        <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>\n          Dropdown content\n        </div>\n      )}\n    </>\n  );\n}"}