How to use prop-types

Comprehensive prop-types code examples:

How to use prop-types.shapeImmutable:

179
180
181
182
183
184
185
186
187
188
    </div>
  );
};

User.propTypes = {
  user: PropTypes.shapeImmutable({
    isLoading: PropTypes.bool.isRequired,
    data: PropTypes.shape({
      name: PropTypes.string.isRequired,
      age: PropTypes.number,

How to use prop-types.elementType:

93
94
95
96
97
98
99
100
101
102
    className: PropTypes.string,
    onPathNotMatch: PropTypes.func,
    viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({
        regexp: PropTypes.instanceOf(RegExp).isRequired,
        urlParamsNames: PropTypes.arrayOf(PropTypes.string).isRequired,
        component: PropTypes.elementType.isRequired
    }))).isRequired
};

module.exports = Router;

How to use prop-types.element:

71
72
73
74
75
76
77
78
79
80
  /**
   * this is essentially children. However we can't use children because then
   * using `wrapper.setProps({ children })` would work differently if this component
   * would be the root.
   */
  __element: PropTypes.element.isRequired,
  __strict: PropTypes.bool.isRequired
} : void 0;
var warnedOnce = false; // Generate an enhanced mount function.

How to use prop-types.exact:

116
117
118
119
120
121
122
123
124
  optionalProperty: PropTypes.string,
  requiredProperty: PropTypes.number.isRequired
}),

// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
  optionalProperty: PropTypes.string,
  requiredProperty: PropTypes.number.isRequired
}),

How to use prop-types.checkPropTypes:

208
209
210
211
212
213
214
215
216

It will throw an error:

```
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
```

(If you see **a warning** rather than an error with this message, please check the [above section about compatibility](#compatibility).)

How to use prop-types.objectOf:

104
105
106
107
108
109
110
111
112

// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),

// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.

How to use prop-types.array:

340
341
342
343
344
345
346
347
348
349
350
		})
	})
}


createContributorNodes.propTypes = {
	contributors: PropTypes.array.isRequired,
	createNode: PropTypes.func.isRequired,
	createNodeId: PropTypes.func.isRequired,
	createContentDigest: PropTypes.func.isRequired
}

How to use prop-types.any:

124
125
126
127
128
129
130
131
132
133
}),

requiredFunc: PropTypes.func.isRequired,

// A value of any data type
requiredAny: PropTypes.any.isRequired,

// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.

How to use prop-types.instanceOf:

122
123
124
125
126
127
128
129
130
131
propTypes: {
  ...ScrollView.propTypes,
  /**
   * An instance of [ListView.DataSource](docs/listviewdatasource.html) to use
   */
  dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired,
  /**
   * (sectionID, rowID, adjacentRowHighlighted) => renderable
   *
   * If provided, a renderable component to be rendered as the separator

How to use prop-types.object:

33
34
35
36
37
38
39
40
41
42
    );
};

module.exports.propTypes = {
    middleEnd: T.shape({
        store: T.object.isRequired
    }).isRequired,
    theme: T.object,
    Router: T.elementType
};

How to use prop-types.node:

3205
3206
3207
3208
3209
3210
3211
3212
3213
3214
3215
3216
}


if (process.env.NODE_ENV !== 'production') {
  App$1.propTypes = {
    location: PropTypes.object,
    children: PropTypes.node
  };
}


const doctype$1 = '<!DOCTYPE html>';

How to use prop-types.shape:

107
108
109
110
111
112
113
114
115

// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.

// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
  optionalProperty: PropTypes.string,
  requiredProperty: PropTypes.number.isRequired
}),

How to use prop-types.oneOf:

91
92
93
94
95
96
97
98
99
100
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message),

// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),

// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
  PropTypes.string,

How to use prop-types.number:

168
169
170
171
172
173
174
175
176
177
 * cells, i.e. they don't span the full width of your view (as in the
 * ListViewGridLayoutExample), you should set the pageSize to be a multiple
 * of the number of cells per row, otherwise you're likely to see gaps at
 * the edge of the ListView as new pages are loaded.
 */
pageSize: PropTypes.number.isRequired,
/**
 * () => renderable
 *
 * The header and footer are always rendered (if these props are provided)

How to use prop-types.arrayOf:

231
232
233
234
235
236
237
238
239
 * top of the screen when scrolling. For example, passing
 * `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
 * top of the scroll view. This property is not supported in conjunction
 * with `horizontal={true}`.
 */
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number).isRequired,
/**
 * Flag indicating whether empty section headers should be rendered. In the future release
 * empty section headers will be rendered by default, and the flag will be deprecated.

How to use prop-types.oneOfType:

94
95
96
97
98
99
100
101
102
103
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),

// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
  PropTypes.instanceOf(Message)
]),

How to use prop-types.PropTypes:

100
101
102
103
104
105
106
107
108
109
110
  return CharacterCounter;
}(_react.Component);


exports.default = CharacterCounter;
CharacterCounter.propTypes = {
  value: _propTypes.PropTypes.string.isRequired,
  maxLength: _propTypes.PropTypes.number.isRequired,
  wrapperStyle: _propTypes.PropTypes.object,
  characterCounterStyle: _propTypes.PropTypes.object,
  overrideStyle: _propTypes.PropTypes.bool

How to use prop-types.bool:

201
202
203
204
205
206
207
208
209

However, code like this will not work with the `prop-types` package:

```js
// Will not work with `prop-types` package!
var errorOrNull = PropTypes.bool(42, 'myProp', 'MyComponent', 'prop');
```

It will throw an error:

How to use prop-types.func:

144
145
146
147
148
149
150
151
152
153
 * being highlighted by calling `highlightRow(sectionID, rowID)`. This
 * sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
 * to control the separators above and below the highlighted row. The highlighted
 * state of a row can be reset by calling highlightRow(null).
 */
renderRow: PropTypes.func.isRequired,
/**
 * How many rows to render on initial component mount. Use this to make
 * it so that the first screen worth of data appears at one time instead of
 * over the course of multiple frames.

How to use prop-types.string:

269
270
271
272
273
274
275
276
277
278
var stylePropTypes = function stylePropTypes(name) {
  var _ref;
  return _ref = {}, _ref[name ? name + "ClassName" : 'className'] = propTypes.oneOfType([propTypes.string, propTypes.func]), _ref;
};
var menuPropTypes = /*#__PURE__*/_extends({
  className: propTypes.string
}, /*#__PURE__*/stylePropTypes('menu'), /*#__PURE__*/stylePropTypes('arrow'), {
  focusProps: propTypes.object,
  menuStyle: propTypes.object,
  arrowStyle: propTypes.object,

How to use prop-types.default:

592
593
594
595
596
597
598
exports.MultiCheckout = MultiCheckout;
MultiCheckout.propTypes = {
  /**
   * UI Component, this must be containt all graphic elements and use parent props
   */
  UIComponent: _propTypes.default.elementType
};