Crash Course on props-types

Rajan Verma — Mon, 04 Dec 2023 11:36:31 +0000

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,
      }),
    ])
  ),
}

Forem: Rajan Verma

Crash Course on props-types

01. What are prop-types?

02. How to use prop-types?

03. Most Common PropTypes

04. What is PropTypes.node?

05. What is PropTypes.element?

06. What is PropTypes.elementType?

07. What is PropTypes.instanceOf?

08. What is PropTypes.oneOf?

09. What is PropTypes.oneOfType?

10. What is PropTypes.arrayOf?

11. What is PropTypes.objectOf?

12. What is PropTypes.shape?

13. What is PropTypes.exact?

14. What is PropTypes.any?

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

16. What is PropTypes.custom?

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

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