Validating Component Props

To enforce the proper usage of a prop within a component props can be validated when component instances are created.

When defining a component the propTypes configuration option can be used to identify if and how props should be validated. In the code example below I'm check to see that the propArray and propObject are in fact the correct data type and sent into the component when it is instantiated.

source code

I am not sending the correct props as specified using propTypes to demonstrate that doing so will cause an error. The above code will result in the following error showing up in the console.

Warning: Failed propType: Invalid prop `propArray` of type `object` supplied to `MyComponent`, expected `array`

Warning: Failed propType: Required prop `propFunc` was not specified in `MyComponent`.

Uncaught TypeError: this.props.propFunc is not a function

React offers several built in validators (e.g.React.PropTypes[VALIDATOR]) which I outline below and the ability to create custom prop validators.

Basic type validators:

These validators check to see if the prop is a specific JS primitive. By default all these are optional. In other words, the validation only occurs if the prop is set.

React.PropTypes.string If prop is used, verify it is a string
React.PropTypes.bool If prop is used, verify it is a boolean
React.PropTypes.func If prop is used, verify it is a function
React.PropTypes.number If prop is used, verify it is a number
React.PropTypes.object If prop is used, verify it is a object
React.PropTypes.array If prop is used, verify it is a array
React.PropTypes.any If prop is used, verify it is of any type

Required type validators:

React.PropTypes.[TYPE].isRequired Chaining the .isRequired on to any type validation to make sure the prop is provided (e.g., propTypes:{propFunc:React.PropTypes.func.isRequired} )

Element validators:

React.PropTypes.element Is a React element.
React.PropTypes.node Is anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types.

Enumerables validators:

React.PropTypes.oneOf(['Mon','Fri']) Is one of several types of specific values.
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number]) Is an object that could be one of many types

Array and Object validators:

React.PropTypes.arrayOf(React.PropTypes.number), Is an array containing only one type of values.
React.PropTypes.objectOf(React.PropTypes.number) Is an object containing only one type of property values
React.PropTypes.instanceOf(People) Is object instance of specific constructor(uses `instanceof`)
React.PropTypes.shape({color:React.PropTypes.string,size: React.PropTypes.number}) Is object containing properties having a specific type

Custom validators:

function(props, propName, componentName){} Supply your own function. For example:

    propTypes: {
      customProp: function(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
          return new Error('Validation failed!');
        }
      }
    }
    

results matching ""

    No results matching ""