why proptypes is used in react code example
Example 1: react proptypes
import PropTypes from 'prop-types';
MyComponent.propTypes = {
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
optionalNode: PropTypes.node,
optionalElement: PropTypes.element,
optionalElementType: PropTypes.elementType,
optionalMessage: PropTypes.instanceOf(Message),
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
requiredFunc: PropTypes.func.isRequired,
requiredAny: PropTypes.any.isRequired,
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Example 2: proptypes
Basic types:
- PropTypes.any: The prop can be of any data type
- PropTypes.bool: The prop should be a Boolean
- PropTypes.number: The prop should be a number
- PropTypes.string: The prop should be a string
- PropTypes.func: The prop should be a function
- PropTypes.array: The prop should be an array
- PropTypes.object: The prop should be an object
- PropTypes.symbol: The prop should be a symbol
Renderable types:
- PropTypes.node: The prop should be anything that can be rendered by React
a number, string, element, or array (or fragment) containing these types
- PropTypes.element: The prop should be a React element
Instance types:
- PropTypes.instanceOf(class): The prop should be an instance of class
Multiple types:
- PropTypes.oneOf: The prop is limited to a specified set of values,
treating it like an enum
- PropTypes.oneOfType: The prop should be one of a specified set of
types, behaving like a union of types
Collection types:
- PropTypes.arrayOf: ensures that the prop is an array in which all
items match the specified type.
- PropTypes.objectOf: ensures that the prop is an object in which all
property values match the specified type.
- PropTypes.shape: ensures that the prop is an object that contains a set
of specified keys with values of the specified types.
- PropTypes.exact: use for strict (or exact) object matching