0
# rc-util
1

2
rc-util provides a comprehensive collection of utility functions and components specifically designed for React development. It offers DOM manipulation utilities, React-specific helpers, developer tools, and cross-browser compatibility solutions for building React component libraries and applications.
3

4
## Package Information
5

6
- **Package Name**: rc-util
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install rc-util`
10

11
## Core Imports
12

13
```javascript
14
import createChainedFunction from 'rc-util/lib/createChainedFunction';
15
import warning from 'rc-util/lib/warning';
16
import Portal from 'rc-util/lib/Portal';
17
import { hasClass, addClass } from 'rc-util/lib/Dom/class';
18
```
19

20
For CommonJS:
21

22
```javascript
23
const createChainedFunction = require('rc-util/lib/createChainedFunction');
24
const warning = require('rc-util/lib/warning');
25
const Portal = require('rc-util/lib/Portal');
26
const { hasClass, addClass } = require('rc-util/lib/Dom/class');
27
```
28

29
## Basic Usage
30

31
```javascript
32
import createChainedFunction from 'rc-util/lib/createChainedFunction';
33
import warning from 'rc-util/lib/warning';
34
import Portal from 'rc-util/lib/Portal';
35

36
// Chain multiple functions
37
const combinedHandler = createChainedFunction(
38
  () => console.log('first'),
39
  () => console.log('second')
40
);
41

42
// Conditional warnings
43
warning(user.name, 'User name is required');
44

45
// Render to container
46
<Portal getContainer={() => document.getElementById('modal-root')}>
47
  <div>Modal content</div>
48
</Portal>
49
```
50

51
## Architecture
52

53
rc-util is organized around several key utility areas:
54

55
- **Core Utilities**: Essential helper functions for chaining, warnings, and unique ID generation
56
- **React Components**: Portal rendering and container management components
57
- **DOM Utilities**: Cross-browser DOM manipulation, measurement, and event handling
58
- **React Hooks**: Custom hooks for state management and lifecycle optimization
59
- **Development Tools**: Deprecation warnings and debugging utilities
60

61
## Capabilities
62

63
### Core Utilities
64

65
Essential utility functions for common React development patterns including function chaining, unique ID generation, and developer warnings.
66

67
```javascript { .api }
68
function createChainedFunction(...functions): Function;
69
function guid(): string;
70
function warn(msg: string): void;
71
function warning(valid: boolean, message: string): void;
72
```
73

74
[Core Utilities](./core-utilities.md)
75

76
### React Components
77

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

80
```javascript { .api }
81
class Portal extends React.Component {
82
  static propTypes: {
83
    getContainer: PropTypes.func.isRequired,
84
    children: PropTypes.node.isRequired,
85
    didUpdate: PropTypes.func
86
  }
87
}
88
```
89

90
[React Components](./react-components.md)
91

92
### DOM Utilities
93

94
Comprehensive DOM manipulation utilities covering CSS operations, event handling, focus management, and cross-browser compatibility for element measurement and styling.
95

96
```javascript { .api }
97
function hasClass(node: HTMLElement, className: string): boolean;
98
function addClass(node: HTMLElement, className: string): void;
99
function get(node: HTMLElement, name?: string): any;
100
function getOffset(node: HTMLElement): { left: number, top: number };
101
```
102

103
[DOM Utilities](./dom-utilities.md)
104

105
### React Hooks
106

107
Modern React hooks for state management, memoization, and lifecycle optimization with enhanced functionality beyond standard React hooks.
108

109
```typescript { .api }
110
function useControlledState<T, R = T>(
111
  defaultStateValue: T | (() => T),
112
  option?: {
113
    defaultValue?: T | (() => T);
114
    value?: T;
115
    onChange?: (value: T, prevValue: T) => void;
116
    postState?: (value: T) => T;
117
  }
118
): [R, (value: T) => void];
119
```
120

121
[React Hooks](./react-hooks.md)
122

123
### Development & Styling
124

125
Development tools and styling utilities including deprecation warnings, attribute filtering, layout effect management, debug utilities, and test helpers.
126

127
```javascript { .api }
128
function deprecated(props: string, instead: string, component: string): void;
129
function pickAttrs(props: object, ariaOnly?: boolean): object;
130
function switchScrollingEffect(close?: boolean): void;
131
function diff(obj1: any, obj2: any, depth?: number): Array;
132
```
133

134
[Development & Styling](./development-styling.md)
135

136
## Types
137

138
```typescript { .api }
139
interface SetStyleOptions {
140
  element?: HTMLElement;
141
}
142

143
type EventHandler = (e: Event) => void;
144
type RefCallback<T> = (node: T) => void;
145
type ElementClass = Function;
146
type Property = PropertyDescriptor | Function;
147
```