0
# Component Utilities
1

2
Essential utilities for React component manipulation, ref handling, and component introspection. These utilities help with component composition and ref management patterns.
3

4
## Capabilities
5

6
### Component Introspection
7

8
#### getDisplayName
9

10
Gets the display name of a React component for debugging and development tools.
11

12
```typescript { .api }
13
/**
14
 * Gets display name of React component
15
 * @param Component - React component
16
 * @returns Display name string
17
 */
18
function getDisplayName(Component: React.ComponentType<any>): string;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import { getDisplayName } from '@mui/utils';
25

26
function MyComponent() {
27
  return <div>Hello</div>;
28
}
29

30
const name = getDisplayName(MyComponent); // "MyComponent"
31
const buttonName = getDisplayName('button'); // "button"
32
```
33

34
#### isMuiElement
35

36
Checks if a React element is a MUI component by matching against provided component names.
37

38
```typescript { .api }
39
/**
40
 * Checks if element is a MUI component
41
 * @param element - React element to check
42
 * @param muiNames - Array of MUI component names to match
43
 * @returns True if element matches any MUI name
44
 */
45
function unstable_isMuiElement(
46
  element: React.ReactElement, 
47
  muiNames: string[]
48
): boolean;
49
```
50

51

52
### Children Utilities
53

54
#### getValidReactChildren
55

56
Filters React children to return only valid React elements, removing null, undefined, and invalid children.
57

58
```typescript { .api }
59
/**
60
 * Filters and returns valid React children
61
 * @param children - React children to filter
62
 * @returns Array of valid React elements
63
 */
64
function getValidReactChildren(children: React.ReactNode): React.ReactElement[];
65
```
66

67
**Usage Example:**
68

69
```typescript
70
import { getValidReactChildren } from '@mui/utils';
71

72
function MyComponent({ children }) {
73
  const validChildren = getValidReactChildren(children);
74
  
75
  return (
76
    <div>
77
      {validChildren.map((child, index) => 
78
        React.cloneElement(child, { key: index })
79
      )}
80
    </div>
81
  );
82
}
83
```
84

85
### Ref Management
86

87
#### setRef
88

89
Sets a value on a React ref, handling both callback refs and mutable ref objects.
90

91
```typescript { .api }
92
/**
93
 * Sets value on React ref
94
 * @param ref - React ref to set value on
95
 * @param value - Value to set
96
 */
97
function unstable_setRef<T>(
98
  ref: React.Ref<T> | undefined, 
99
  value: T | null
100
): void;
101
```
102

103
**Usage Example:**
104

105
```typescript
106
import { unstable_setRef as setRef } from '@mui/utils';
107

108
function MyComponent({ inputRef }) {
109
  const internalRef = React.useRef<HTMLInputElement>(null);
110
  
111
  React.useEffect(() => {
112
    if (internalRef.current) {
113
      setRef(inputRef, internalRef.current);
114
    }
115
  }, [inputRef]);
116

117
  return <input ref={internalRef} />;
118
}
119
```
120

121
#### getReactElementRef
122

123
Extracts the ref from a React element.
124

125
```typescript { .api }
126
/**
127
 * Extracts ref from React element
128
 * @param element - React element
129
 * @returns Ref from element or null
130
 */
131
function unstable_getReactElementRef(
132
  element: React.ReactElement
133
): React.Ref<any> | null;
134
```
135

136
#### getReactNodeRef
137

138
Extracts the ref from a React node (element or component).
139

140
```typescript { .api }
141
/**
142
 * Extracts ref from React node
143
 * @param node - React node
144
 * @returns Ref from node or null
145
 */
146
function unstable_getReactNodeRef(
147
  node: React.ReactNode
148
): React.Ref<any> | null;
149
```
150

151