0
# PropType Validators
1

2
Development-time validation utilities for React component props, providing enhanced debugging and type checking in development mode. These validators help catch common errors and improve developer experience.
3

4
## Capabilities
5

6
### Basic Validators
7

8
#### HTMLElementType
9

10
PropType validator for HTML element types (e.g., 'div', 'span', 'button').
11

12
```typescript { .api }
13
/**
14
 * PropType validator for HTML element types
15
 */
16
const HTMLElementType: React.Validator<any>;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { HTMLElementType } from '@mui/utils';
23
import PropTypes from 'prop-types';
24

25
MyComponent.propTypes = {
26
  component: HTMLElementType
27
};
28
```
29

30
#### elementAcceptingRef
31

32
PropType validator for elements that can accept a ref.
33

34
```typescript { .api }
35
/**
36
 * PropType validator for elements that accept refs
37
 */
38
const elementAcceptingRef: React.Validator<any>;
39
```
40

41
#### elementTypeAcceptingRef
42

43
PropType validator for element types (components) that can accept a ref.
44

45
```typescript { .api }
46
/**
47
 * PropType validator for element types that accept refs
48
 */
49
const elementTypeAcceptingRef: React.Validator<any>;
50
```
51

52
#### refType
53

54
PropType validator for React refs.
55

56
```typescript { .api }
57
/**
58
 * PropType validator for React refs
59
 */
60
const refType: React.Validator<any>;
61
```
62

63
#### integerPropType
64

65
PropType validator for integer values.
66

67
```typescript { .api }
68
/**
69
 * PropType validator for integer values
70
 */
71
const integerPropType: React.Validator<any>;
72
```
73

74
### Composite Validators
75

76
#### chainPropTypes
77

78
Chains multiple PropType validators together, allowing multiple validation rules for a single prop.
79

80
```typescript { .api }
81
/**
82
 * Chains multiple PropType validators together
83
 * @param validator - First validator
84
 * @param validators - Additional validators to chain
85
 * @returns Combined validator function
86
 */
87
function chainPropTypes(
88
  validator: React.Validator<any>,
89
  ...validators: React.Validator<any>[]
90
): React.Validator<any>;
91
```
92

93
**Usage Example:**
94

95
```typescript
96
import { chainPropTypes, integerPropType } from '@mui/utils';
97
import PropTypes from 'prop-types';
98

99
const positiveIntegerPropType = chainPropTypes(
100
  integerPropType,
101
  (props, propName, componentName) => {
102
    if (props[propName] < 0) {
103
      return new Error(`Invalid prop \`${propName}\` of value \`${props[propName]}\` supplied to \`${componentName}\`, expected a positive integer.`);
104
    }
105
    return null;
106
  }
107
);
108

109
MyComponent.propTypes = {
110
  count: positiveIntegerPropType
111
};
112
```
113

114
#### exactProp
115

116
Ensures only specified props are passed to a component (development only).
117

118
```typescript { .api }
119
/**
120
 * Ensures only specified props are passed (development only)
121
 * @param propTypes - Object of allowed PropTypes
122
 * @returns Enhanced PropTypes object with exact validation
123
 */
124
function exactProp(propTypes: Record<string, any>): Record<string, any>;
125
```
126

127
**Usage Example:**
128

129
```typescript
130
import { exactProp } from '@mui/utils';
131
import PropTypes from 'prop-types';
132

133
MyComponent.propTypes = exactProp({
134
  children: PropTypes.node,
135
  className: PropTypes.string,
136
  color: PropTypes.oneOf(['primary', 'secondary'])
137
});
138
```
139

140
### Development Utilities
141

142
#### deprecatedPropType
143

144
Wraps a PropType validator with a deprecation warning.
145

146
```typescript { .api }
147
/**
148
 * Wraps PropType validator with deprecation warning
149
 * @param validator - Original validator
150
 * @param reason - Deprecation reason message
151
 * @returns Validator with deprecation warning
152
 */
153
function unstable_deprecatedPropType(
154
  validator: React.Validator<any>, 
155
  reason: string
156
): React.Validator<any>;
157
```
158

159
**Usage Example:**
160

161
```typescript
162
import { unstable_deprecatedPropType as deprecatedPropType } from '@mui/utils';
163
import PropTypes from 'prop-types';
164

165
MyComponent.propTypes = {
166
  oldProp: deprecatedPropType(
167
    PropTypes.string,
168
    'The oldProp is deprecated. Use newProp instead.'
169
  ),
170
  newProp: PropTypes.string
171
};
172
```
173

174
#### unsupportedProp
175

176
Creates a validator that always throws an error for unsupported props.
177

178
```typescript { .api }
179
/**
180
 * Creates validator that throws error for unsupported props
181
 * @param props - Props object
182
 * @param propName - Name of the prop
183
 * @param componentName - Name of the component
184
 * @param location - Prop location
185
 * @param propFullName - Full prop name
186
 * @returns Error for unsupported prop
187
 */
188
function unstable_unsupportedProp(
189
  props: any,
190
  propName: string,
191
  componentName: string,
192
  location: string,
193
  propFullName: string
194
): Error;
195
```
196

197
### Factory Functions
198

199
#### requirePropFactory
200

201
Creates a PropType validator that requires a specific prop when certain conditions are met.
202

203
```typescript { .api }
204
/**
205
 * Creates PropType validator that requires specific prop
206
 * @param componentNameInError - Component name for error messages
207
 * @param Component - Optional component reference
208
 * @returns Validator function for required prop
209
 */
210
function unstable_requirePropFactory(
211
  componentNameInError: string,
212
  Component?: React.ComponentType<any>
213
): (props: any, propName: string) => Error | null;
214
```
215

216
**Usage Example:**
217

218
```typescript
219
import { unstable_requirePropFactory as requirePropFactory } from '@mui/utils';
220

221
const requireVariant = requirePropFactory('MyButton');
222

223
MyButton.propTypes = {
224
  variant: requireVariant,
225
  children: PropTypes.node
226
};
227
```