Popper (Positioning Engine) 🎈

Ahoy, Positioning Pilot! 🚀

The popper module (likely a wrapper around a library like Popper.js or a custom implementation) is the unsung hero behind perfectly positioned floating elements like tooltips, dropdown menus, and popovers. It dynamically calculates the best spot for your floating element relative to a reference (anchor) element.

It's like a magical tether that always keeps your floating UI bits in the right place, even when things scroll or resize! 🪄

What it does:

• 📏 Calculates optimal placement (top, bottom, left, right, with alignments).
• 🔄 Updates position on scroll or resize.
• 🤏 Handles edge detection (prevents going off-screen by flipping or overflowing).
• 🏹 Often provides data for positioning an arrow element.

Conceptual Usage (Usually by other components like DropdownMenu, Popover, Tooltip):

import * as PopperPrimitive from '@ryvora/react-popper'; // Or the specific name used

function MyFloatingComponent() {
  // Refs to the trigger/anchor and the content to be popped
  const triggerRef = React.useRef(null);
  const contentRef = React.useRef(null);

  // Popper hook or component would use these refs and options
  // const { styles, attributes } = usePopper(triggerRef, contentRef, { placement: 'bottom-start' });

  return (
    <PopperPrimitive.Root>
      {' '}
      {/* Manages Popper instance */}
      <PopperPrimitive.Anchor ref={triggerRef} asChild>
        <button>I am the Anchor</button>
      </PopperPrimitive.Anchor>
      {/* Portal is often used here */}
      <PopperPrimitive.Content ref={contentRef} sideOffset={5} align="start">
        <div>I am the Popper Content!</div>
        <PopperPrimitive.Arrow /> {/* Optional arrow */}
      </PopperPrimitive.Content>
    </PopperPrimitive.Root>
  );
}

Keep your UIs perfectly poised and positioned! ✨