CODEWITHSUNDEEP
reactjsreact-proptypes
Kevin Amiranoff
Kevin Amiranoff

Reputation: 14468

React PropTypes: Allow different types of PropTypes for one prop

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
}

Upvotes: 369

Views: 178879

Answers (5)

Sourav Singh
Sourav Singh

Reputation: 955

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 (
      <>
        {title}
        <br />
        {data}
      </>
    );
  }
}

/**
 * Define component props
 */
MyComponent.propTypes = {
  data: oneOfType([array, string, shape({})]),
  title: string,
};

export default MyComponent;

Upvotes: 7

cleong
cleong

Reputation: 7606

For documentation purpose, it's better to list the string values that are legal:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),

Upvotes: 46

CorrinaB
CorrinaB

Reputation: 251

This might work for you:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

Upvotes: 25

Michael
Michael

Reputation: 23

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string

Upvotes: -7

Paweł Andruszk&#243;w
Paweł Andruszk&#243;w

Reputation: 8403

size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Learn more: Typechecking With PropTypes

Upvotes: 832

Related Questions