Context Management

Context management functionality for coordinating reference and popper elements in component-based usage patterns. The Manager component provides React context that enables Reference and Popper components to communicate and share state.

Capabilities

Manager Component

Provides context management for coordinating between Reference and Popper components. Must wrap both Reference and Popper components to enable communication.

/**
 * Context provider that manages shared state between Reference and Popper components
 * @param children - Child components, typically Reference and Popper
 * @returns React element providing context to children
 */
function Manager({ children }: ManagerProps): React.Node;

interface ManagerProps {
  /** Child components that need access to shared positioning context */
  children: React.ReactNode;
}

Usage Example:

import React from "react";
import { Manager, Reference, Popper } from "react-popper";

function ContextExample() {
  return (
    <Manager>
      <Reference>
        {({ ref }) => <button ref={ref}>Click me</button>}
      </Reference>
      <Popper>
        {({ ref, style, placement }) => (
          <div ref={ref} style={style}>
            Positioned content
          </div>
        )}
      </Popper>
    </Manager>
  );
}

Internal Implementation

The Manager component uses internal React contexts to coordinate state between Reference and Popper components. These implementation details are handled automatically and should not be accessed directly by application code.

Error Handling

The Manager system includes built-in validation:

• Reference components will warn if used outside of a Manager
• Components handle cleanup automatically when unmounted
• Reference element state is safely managed during component lifecycle

Best Practices

1. Always wrap Reference and Popper with Manager:

   // ✅ Correct
   <Manager>
     <Reference>{({ ref }) => <button ref={ref}>Button</button>}</Reference>
     <Popper>{({ ref, style }) => <div ref={ref} style={style}>Content</div>}</Popper>
   </Manager>

2. Avoid nesting Managers unnecessarily:

   // ❌ Avoid
   <Manager>
     <Manager>
       <Reference>...</Reference>
     </Manager>
   </Manager>

3. Use single Manager for related Reference/Popper pairs:

   // ✅ Good for one tooltip
   <Manager>
     <Reference>...</Reference>
     <Popper>...</Popper>
   </Manager>