0
# React Components
1

2
Ready-to-use React components for portal rendering and container management, essential for modals, tooltips, and overlay components.
3

4
## Capabilities
5

6
### Portal
7

8
Renders children into a specific container element using React portals. Automatically manages container creation and cleanup.
9

10
```javascript { .api }
11
/**
12
 * Portal component for rendering children in a different DOM container
13
 */
14
class Portal extends React.Component {
15
  static propTypes: {
16
    /** Function that returns the container element */
17
    getContainer: PropTypes.func.isRequired,
18
    /** Content to render in the portal */
19
    children: PropTypes.node.isRequired,
20
    /** Optional callback fired after component updates */
21
    didUpdate: PropTypes.func
22
  }
23
  
24
  /** Create and get the container on mount */
25
  componentDidMount(): void;
26
  
27
  /** Call didUpdate callback if provided */
28
  componentDidUpdate(prevProps: object): void;
29
  
30
  /** Clean up container on unmount */
31
  componentWillUnmount(): void;
32
  
33
  /** Render children into portal container */
34
  render(): React.ReactPortal | null;
35
}
36
```
37

38
**Usage Examples:**
39

40
```javascript
41
import Portal from 'rc-util/lib/Portal';
42

43
// Basic modal portal
44
function Modal({ children, visible }) {
45
  if (!visible) return null;
46
  
47
  return (
48
    <Portal getContainer={() => document.body}>
49
      <div className="modal-overlay">
50
        <div className="modal-content">
51
          {children}
52
        </div>
53
      </div>
54
    </Portal>
55
  );
56
}
57

58
// Portal to specific container
59
function Tooltip({ children, content }) {
60
  return (
61
    <div>
62
      {children}
63
      <Portal getContainer={() => document.getElementById('tooltip-root')}>
64
        <div className="tooltip">{content}</div>
65
      </Portal>
66
    </div>
67
  );
68
}
69

70
// With update callback
71
<Portal 
72
  getContainer={() => modalContainer}
73
  didUpdate={(prevProps) => {
74
    console.log('Portal updated', prevProps);
75
  }}
76
>
77
  <div>Portal content</div>
78
</Portal>
79
```
80

81
### getScrollBarSize
82

83
Calculates and caches the scrollbar width for the current browser/OS combination.
84

85
```javascript { .api }
86
/**
87
 * Get the width of the scrollbar
88
 * @param {boolean} [fresh] - If true, recalculate instead of using cached value
89
 * @returns {number} Scrollbar width in pixels
90
 */
91
function getScrollBarSize(fresh?: boolean): number;
92
```
93

94
**Usage Example:**
95

96
```javascript
97
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
98

99
// Get cached scrollbar size
100
const scrollbarWidth = getScrollBarSize(); // e.g., 17
101

102
// Force recalculation
103
const freshWidth = getScrollBarSize(true);
104

105
// Use in CSS calculations
106
const modalWidth = `calc(100vw - ${scrollbarWidth}px)`;
107
```
108

109
### switchScrollingEffect
110

111
Manages body scrolling effects to prevent layout shift when hiding scrollbars, commonly used in modal implementations.
112

113
```javascript { .api }
114
/**
115
 * Improve shake when page scroll bar is hidden by adjusting body styles
116
 * @param {boolean} [close] - If true, restore original styles and remove effect
117
 */
118
function switchScrollingEffect(close?: boolean): void;
119
```
120

121
**Usage Example:**
122

123
```javascript
124
import switchScrollingEffect from 'rc-util/lib/switchScrollingEffect';
125

126
// Enable scrolling effect (typically when opening modal)
127
switchScrollingEffect();
128
// Adds 'ant-scrolling-effect' class to body and adjusts width
129

130
// Disable scrolling effect (typically when closing modal)
131
switchScrollingEffect(true);
132
// Removes class and restores original styles
133
```
134

135
### Legacy Components
136

137
These components are provided for backward compatibility with older React patterns:
138

139
#### getContainerRenderMixin
140

141
Legacy mixin for rendering components into containers (pre-hooks era).
142

143
```javascript { .api }
144
/**
145
 * Generate a mixin for rendering components into containers
146
 * @param {object} config - Configuration object
147
 * @returns {object} Mixin object for React components
148
 */
149
function getContainerRenderMixin(config: {
150
  /** Whether to render component into container automatically */
151
  autoMount?: boolean;
152
  /** Whether to remove container automatically on unmount */
153
  autoDestroy?: boolean;
154
  /** Function to determine if component is visible */
155
  isVisible?: (instance: object) => boolean;
156
  /** Function to determine if component should force render */
157
  isForceRender?: (instance: object) => boolean;
158
  /** Function to get component to render */
159
  getComponent?: (instance: object, extra?: any) => React.ReactNode;
160
  /** Function to get the container element */
161
  getContainer?: (instance: object) => HTMLElement;
162
}): object;
163
```
164

165
#### ContainerRender
166

167
Legacy container rendering component.
168

169
```javascript { .api }
170
class ContainerRender extends React.Component {
171
  // Legacy component for container rendering
172
}
173
```
174

175
#### PortalWrapper
176

177
Legacy portal wrapper component with additional functionality.
178

179
```javascript { .api }
180
class PortalWrapper extends React.Component {
181
  // Legacy portal wrapper with enhanced features
182
}
183
```