0
# Validation Utilities
1

2
PropTypes validators specifically designed for MobX observable data types, ensuring proper validation while preventing unwanted tracking during the validation process.
3

4
## Capabilities
5

6
### Observable Array Validators
7

8
Validators for MobX observable arrays with optional type checking for array elements.
9

10
```typescript { .api }
11
/**
12
 * Validates that prop is a MobX observable array
13
 */
14
const observableArray: React.Requireable<any>;
15

16
/**
17
 * Validates that prop is a MobX observable array with elements of specified type
18
 * @param typeChecker - Validator for array elements
19
 * @returns Validator for observable array of specified type
20
 */
21
function observableArrayOf(typeChecker: React.Validator<any>): React.Requireable<any>;
22
```
23

24
**Usage Example:**
25

26
```typescript
27
import React from "react";
28
import { observer, PropTypes } from "mobx-react";
29
import PropTypesLib from "prop-types";
30

31
const TodoList = observer(({ todos, priorities }) => (
32
  <div>
33
    {todos.map(todo => <div key={todo.id}>{todo.title}</div>)}
34
  </div>
35
));
36

37
TodoList.propTypes = {
38
  todos: PropTypes.observableArray.isRequired,
39
  priorities: PropTypes.observableArrayOf(PropTypesLib.string)
40
};
41
```
42

43
### Observable Object Validators
44

45
Validators for MobX observable objects.
46

47
```typescript { .api }
48
/**
49
 * Validates that prop is a MobX observable object
50
 */
51
const observableObject: React.Requireable<any>;
52
```
53

54
**Usage Example:**
55

56
```typescript
57
import React from "react";
58
import { observer, PropTypes } from "mobx-react";
59

60
const UserProfile = observer(({ user }) => (
61
  <div>
62
    <h1>{user.name}</h1>
63
    <p>{user.email}</p>
64
  </div>
65
));
66

67
UserProfile.propTypes = {
68
  user: PropTypes.observableObject.isRequired
69
};
70
```
71

72
### Observable Map Validators
73

74
Validators for MobX observable maps.
75

76
```typescript { .api }
77
/**
78
 * Validates that prop is a MobX observable map
79
 */
80
const observableMap: React.Requireable<any>;
81
```
82

83
**Usage Example:**
84

85
```typescript
86
import React from "react";
87
import { observer, PropTypes } from "mobx-react";
88

89
const KeyValueDisplay = observer(({ data }) => (
90
  <div>
91
    {Array.from(data.entries()).map(([key, value]) => (
92
      <div key={key}>{key}: {value}</div>
93
    ))}
94
  </div>
95
));
96

97
KeyValueDisplay.propTypes = {
98
  data: PropTypes.observableMap.isRequired
99
};
100
```
101

102
### Flexible Array Validators
103

104
Validators that accept either native JavaScript arrays or MobX observable arrays.
105

106
```typescript { .api }
107
/**
108
 * Validates that prop is either a native array or MobX observable array
109
 */
110
const arrayOrObservableArray: React.Requireable<any>;
111

112
/**
113
 * Validates that prop is either a native array or MobX observable array with elements of specified type
114
 * @param typeChecker - Validator for array elements
115
 * @returns Validator for native or observable array of specified type
116
 */
117
function arrayOrObservableArrayOf(typeChecker: React.Validator<any>): React.Requireable<any>;
118
```
119

120
**Usage Example:**
121

122
```typescript
123
import React from "react";
124
import { observer, PropTypes } from "mobx-react";
125
import PropTypesLib from "prop-types";
126

127
const FlexibleList = observer(({ items, tags }) => (
128
  <div>
129
    {items.map((item, index) => (
130
      <div key={index}>{item}</div>
131
    ))}
132
  </div>
133
));
134

135
FlexibleList.propTypes = {
136
  items: PropTypes.arrayOrObservableArray.isRequired,
137
  tags: PropTypes.arrayOrObservableArrayOf(PropTypesLib.string)
138
};
139
```
140

141
### Flexible Object Validators
142

143
Validators that accept either native JavaScript objects or MobX observable objects.
144

145
```typescript { .api }
146
/**
147
 * Validates that prop is either a native object or MobX observable object
148
 */
149
const objectOrObservableObject: React.Requireable<any>;
150
```
151

152
**Usage Example:**
153

154
```typescript
155
import React from "react";
156
import { observer, PropTypes } from "mobx-react";
157

158
const ConfigDisplay = observer(({ config }) => (
159
  <div>
160
    {Object.entries(config).map(([key, value]) => (
161
      <div key={key}>{key}: {String(value)}</div>
162
    ))}
163
  </div>
164
));
165

166
ConfigDisplay.propTypes = {
167
  config: PropTypes.objectOrObservableObject.isRequired
168
};
169
```
170

171
### Complete PropTypes Object
172

173
All validation utilities are available as properties of the exported PropTypes object.
174

175
```typescript { .api }
176
const PropTypes: {
177
  observableArray: React.Requireable<any>;
178
  observableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
179
  observableMap: React.Requireable<any>;
180
  observableObject: React.Requireable<any>;
181
  arrayOrObservableArray: React.Requireable<any>;
182
  arrayOrObservableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
183
  objectOrObservableObject: React.Requireable<any>;
184
};
185
```
186

187
**Complete Usage Example:**
188

189
```typescript
190
import React from "react";
191
import { observer, PropTypes } from "mobx-react";
192
import PropTypesLib from "prop-types";
193

194
const ComplexComponent = observer(({
195
  todos,
196
  user,
197
  metadata,
198
  tags,
199
  settings,
200
  statistics
201
}) => (
202
  <div>
203
    <h1>{user.name}</h1>
204
    <p>{todos.length} todos</p>
205
    <div>Tags: {tags.join(", ")}</div>
206
    <pre>{JSON.stringify(settings, null, 2)}</pre>
207
  </div>
208
));
209

210
ComplexComponent.propTypes = {
211
  todos: PropTypes.observableArray.isRequired,
212
  user: PropTypes.observableObject.isRequired,
213
  metadata: PropTypes.observableMap.isRequired,
214
  tags: PropTypes.arrayOrObservableArrayOf(PropTypesLib.string).isRequired,
215
  settings: PropTypes.objectOrObservableObject,
216
  statistics: PropTypes.arrayOrObservableArray
217
};
218
```