React PropTypes Allow different types of PropTypes for one prop

Question

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

User · Accepted Answer

size  PropTypes oneOfType     PropTypes string    PropTypes number       Learn more  Typechecking With PropTypes

User · Answer

Here is pro example of using multi proptypes and single proptype  import React    Component   from  react   import   string  shape  array  oneOfType   from  prop-types    class MyComponent extends Component              Render         render         const   title  data     this props       return          lt  gt           title           lt br   gt           data         lt   gt                       Define component props     MyComponent propTypes       data  oneOfType  array  string  shape          title  string      export default MyComponent

User · Answer

This might work for you   height  PropTypes oneOfType  PropTypes string  PropTypes number

User · Answer

import React from  react                 lt --as normal import PropTypes from  prop-types        lt --add this as a second line      App propTypes             monkey  PropTypes string             lt --omit  React           cat  PropTypes number isRequired     lt --omit  React               Wrong   React PropTypes string     Right   PropTypes string

User · Answer

For documentation purpose  it s better to list the string values that are legal   size  PropTypes oneOfType       PropTypes number      PropTypes oneOf    SMALL    LARGE

[reactjs] React PropTypes : Allow different types of PropTypes for one prop

Examples related to reactjs

Examples related to react-proptypes