Crash Course on props-types

01. What are prop-types?

PropTypes are used to validate props in React. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode.

02. How to use prop-types?

import PropTypes from "prop-types";

ComponentName.propTypes = {
  name: PropTypes.string,
};

03. Most Common PropTypes

ComponentName.propTypes = {
  optionalArray: PropTypes.array, // Array
  optionalBool: PropTypes.bool, // Boolean
  optionalFunc: PropTypes.func, // Function
  optionalNumber: PropTypes.number, // Number
  optionalObject: PropTypes.object, // Object 
  optionalString: PropTypes.string, // String 
  optionalSymbol: PropTypes.symbol, // Symbol
}

04. What is PropTypes.node?

PropTypes.node is used to validate a single child element or a fragment.

ComponentName.propTypes = {
  optionalNode: PropTypes.node,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.children}</div>;
}

ComponentName.propTypes = {
  children: PropTypes.node, // Anything that can be rendered.
};

<ComponentName>Hello World</ComponentName>; // Valid
<ComponentName><h1>Hello World</h1></ComponentName>; // Valid

05. What is PropTypes.element?

PropTypes.element is used to validate a single child element.

ComponentName.propTypes = {
  optionalElement: PropTypes.element,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.element,
};

<ComponentName message={<h1>Hello World</h1>} />; // Valid
<ComponentName message="Hello World" />; // Invalid
<ComponentName message={(
    <>
      <h1>Hello</h1>
      <h2>World</h2>
    </>
  )} 
/>; // Valid

06. What is PropTypes.elementType?

PropTypes.elementType is used to validate a single child element or a function that returns a child element.

ComponentName.propTypes = {
  optionalElementType: PropTypes.elementType,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.elementType,
};

<ComponentName message={<h1>Hello World</h1>} />; // Valid
<ComponentName message="Hello World" />; // Invalid
<ComponentName message={(
    <>
      <h1>Hello</h1>
      <h2>World</h2>
    </>
  )}
/>; // Valid

07. What is PropTypes.instanceOf?

PropTypes.instanceOf is used to validate that the prop is an instance of a class.

ComponentName.propTypes = {
  optionalMessage: PropTypes.instanceOf(Message),
}

Use Cases:

class Message {}

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.instanceOf(Message),
};

<ComponentName message={new Message()} />; // Valid
<ComponentName message="Hello World" />; // Invalid

08. What is PropTypes.oneOf?

PropTypes.oneOf is used to validate that the prop is one of the values in an array.

ComponentName.propTypes = {
  optionalMessage: PropTypes.oneOf(["News", "Photos"]),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.oneOf(["News", "Photos"]),
};

<ComponentName message="News" />; // Valid
<ComponentName message="Photos" />; // Valid
<ComponentName message="Hello World" />; // Invalid

09. What is PropTypes.oneOfType?

PropTypes.oneOfType is used to validate that the prop is one of the values in an array of types.

ComponentName.propTypes = {
  optionalMessage: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
};

<ComponentName message="Hello World" />; // Valid
<ComponentName message={123} />; // Valid
<ComponentName message={true} />; // Invalid

10. What is PropTypes.arrayOf?

PropTypes.arrayOf is used to validate that the prop is an array of a certain type.

ComponentName.propTypes = {
  optionalMessage: PropTypes.arrayOf(PropTypes.string),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.arrayOf(PropTypes.string),
};

<ComponentName message={["Hello", "World"]} />; // Valid
<ComponentName message={["Hello", 123]} />; // Invalid

11. What is PropTypes.objectOf?

PropTypes.objectOf is used to validate that the prop is an object with property values of a certain type.

ComponentName.propTypes = {
  optionalMessage: PropTypes.objectOf(PropTypes.string),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.objectOf(PropTypes.string),
};

<ComponentName message={{ hello: "Hello", world: "World" }} />; // Valid
<ComponentName message={{ hello: "Hello", world: 123 }} />; // Invalid

12. What is PropTypes.shape?

PropTypes.shape is used to validate that the prop is an object taking on a particular shape. It is different from PropTypes.exact in that it does not warn you about extra properties.

ComponentName.propTypes = {
  optionalMessage: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
};

<ComponentName message={{ color: "red", fontSize: 12 }} />; // Valid
<ComponentName message={{ color: "red", fontSize: "12px" }} />; // Invalid

13. What is PropTypes.exact?

PropTypes.exact is used to validate that the prop is an object taking on a particular shape, with no extra properties.

ComponentName.propTypes = {
  optionalMessage: PropTypes.exact({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.exact({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
};

<ComponentName message={{ color: "red", fontSize: 12 }} />; // Valid
<ComponentName message={{ color: "red", fontSize: "12px" }} />; // Invalid
<ComponentName message={{ color: "red", fontSize: 12, extra: true }} />; // Invalid

14. What is PropTypes.any?

PropTypes.any is used to validate that the prop can be any data type.

ComponentName.propTypes = {
  optionalMessage: PropTypes.any,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.any,
};

<ComponentName message="Hello World" />; // Valid
<ComponentName message={123} />; // Valid
<ComponentName message={true} />; // Valid

15. What is PropTypes.[some_type].isRequired?

PropTypes.[some_type].isRequired is used to validate that the prop is required.

ComponentName.propTypes = {
  optionalMessage: PropTypes.string.isRequired,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

ComponentName.propTypes = {
  message: PropTypes.string.isRequired,
};

<ComponentName message="Hello World" />; // Valid
<ComponentName />; // Invalid

16. What is PropTypes.custom?

PropTypes.custom is used to validate that the prop is validated by a custom validator function.

ComponentName.propTypes = {
  optionalMessage: PropTypes.string,
}

Use Cases:

function ComponentName(props) {
  return <div>{props.message}</div>;
}

function customPropType(props, propName, componentName) {
  if (!/matchme/.test(props[propName])) {
    return new Error(
      "Invalid prop `" +
        propName +
        "` supplied to" +
        " `" +
        componentName +
        "`. Validation failed."
    );
  }
}

// if type is set to string
ComponentName.propTypes = {
  message: PropTypes.string,
};

<ComponentName message="matchme" />; // Valid
<ComponentName message="nomatch" />; // Invalid

// if type is set to customPropType
ComponentName.propTypes = {
  message: customPropType,
};

<ComponentName message="matchme" />; // Valid
<ComponentName message="nomatch" />; // Invalid

17. What is PropTypes.arrayOf(PropTypes.shape())?

PropTypes.arrayOf(PropTypes.shape()) is used to validate that the prop is an array of objects taking on a particular shape.

ComponentName.propTypes = {
  optionalMessage: PropTypes.arrayOf(
    PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number,
    })
  ),
}

Use Cases:

function ComponentName(props) {
  return <div>{props.messages}</div>;
}

ComponentName.propTypes = {
  messages: PropTypes.arrayOf(
    PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number,
    })
  ),
};

<ComponentName
  messages={[
    { color: "red", fontSize: 12 },
    { color: "green", fontSize: 14 },
  ]}
/>; // Valid
<ComponentName
  messages={[
    { color: "red", fontSize: 12 },
    { color: "green", fontSize: "14px" },
  ]}
/>; // Invalid

18. What is PropTypes.arrayOf(PropTypes.oneOfType())?

PropTypes.arrayOf(PropTypes.oneOfType()) is used to validate that the prop is an array of a certain type or an array of objects taking on a particular shape.

ComponentName.propTypes = {
  optionalMessage: PropTypes.arrayOf(
    PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number,
      }),
    ])
  ),
}