I do validate internal structure of props. To reduce the repetitive validation checks, when same props are being passed down around to multiple components, I create modules for prop interfaces and import that in individual components.
import {PropTypes as T} from 'react'
const IFormTheme = T.shape({
colors: T.shape({
inputEntry: T.string,
controlBorder: T.string,
helpText: T.string
})
...
})
// ... define any custom prop validators
export default IFormTheme
import IFormTheme from './IFormTheme'
class SomeFormControl extends Components {
static propTypes = {
theme: IFormTheme
}
...
}
In some cases when minor specializations are required for the config it is useful to export an interface factory over an interface:
const IFormThemeFactory = (specializations) => {
// ... restrict proptypes based on specializations
return T.shape({
...
})
}
I realize that this may appear to be over-engineered out of context, but can be useful when say for instance some specific theme property may not be required for all controls but be mandatory for some control.
Also having interfaces explicit enables you to use them for checking boundary conditions explictly even in production environment (eg. unreliable user input, or some third party service) where as prop validations are used only during development.