React PropTypes : Allow different types of PropTypes for one prop

reactjs react-proptypes
Kevin Amiranoff picture Kevin Amiranoff · Jan 23, 2017 · Viewed 96k times · Source

I have a component that receives a prop for its size. The prop can be either a string or a number ex: "LARGE" or 17.

Can I let React.PropTypes know that this can be either one or the other in the propTypes validation?

If I don't specify the type I get a warning: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Answer

Paweł Andruszków picture Paweł Andruszków · Jan 23, 2017 
size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Learn more: Typechecking With PropTypes

Related questions

React proptype array with shape

Is there a built-in way to use proptypes to ensure that an array of objects being passed to a component is actually an array of objects of a specific shape? Maybe something like this? annotationRanges: PropTypes.array(PropTypes.shape({ start: …

Read More
ReactJs: What should the PropTypes be for this.props.children?

Given a simple component that renders its children: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Question: What should the propType of the children …

Read More
Prop is marked as required in component, but its value is `undefined`

single.js : import React, { Component } from 'react'; import Details from '../components/details' import { ProgressBar } from 'react-materialize'; import { Route, Link } from 'react-router-dom'; const Test = () => ( <div> RENDER PAGE 1</div> ) class SinglePage extends Component { constructor(props) { super(…

Read More