0
# Context Management
1

2
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.
3

4
## Capabilities
5

6
### Manager Component
7

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

10
```typescript { .api }
11
/**
12
 * Context provider that manages shared state between Reference and Popper components
13
 * @param children - Child components, typically Reference and Popper
14
 * @returns React element providing context to children
15
 */
16
function Manager({ children }: ManagerProps): React.Node;
17

18
interface ManagerProps {
19
  /** Child components that need access to shared positioning context */
20
  children: React.ReactNode;
21
}
22
```
23

24
**Usage Example:**
25

26
```tsx
27
import React from "react";
28
import { Manager, Reference, Popper } from "react-popper";
29

30
function ContextExample() {
31
  return (
32
    <Manager>
33
      <Reference>
34
        {({ ref }) => <button ref={ref}>Click me</button>}
35
      </Reference>
36
      <Popper>
37
        {({ ref, style, placement }) => (
38
          <div ref={ref} style={style}>
39
            Positioned content
40
          </div>
41
        )}
42
      </Popper>
43
    </Manager>
44
  );
45
}
46
```
47

48
### Internal Implementation
49

50
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.
51

52
## Error Handling
53

54
The Manager system includes built-in validation:
55

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

60
## Best Practices
61

62
1. **Always wrap Reference and Popper with Manager:**
63
   ```tsx
64
   // ✅ Correct
65
   <Manager>
66
     <Reference>{({ ref }) => <button ref={ref}>Button</button>}</Reference>
67
     <Popper>{({ ref, style }) => <div ref={ref} style={style}>Content</div>}</Popper>
68
   </Manager>
69
   ```
70

71
2. **Avoid nesting Managers unnecessarily:**
72
   ```tsx
73
   // ❌ Avoid
74
   <Manager>
75
     <Manager>
76
       <Reference>...</Reference>
77
     </Manager>
78
   </Manager>
79
   ```
80

81
3. **Use single Manager for related Reference/Popper pairs:**
82
   ```tsx
83
   // ✅ Good for one tooltip
84
   <Manager>
85
     <Reference>...</Reference>
86
     <Popper>...</Popper>
87
   </Manager>
88
   ```