[React] prop-types

prop-types is the official react tool, runtime type checking for React props and similar objects.

But, I think if you need this feature, TypeScript is a better choice.

Installation

You can install prop-types through yarn or npm.

$ yarn add -D prop-types
$ npm i -D prop-types

Usage Example

prop-types helps to improve readability and ease maintenance by clearly setting the information of type as the following example.

import PropTypes from "prop-types";

const Type = ({ name, age, isMale, type, onChangeAge }) => {
  const onClick = (newAge) => {
    if (newAge) {
      onChangeAge(newAge);
    }
  };

  return (
    <div>
      {`name: ${name}, age: ${age}, isMale: ${isMale}, type: ${type}`}
    </div>
  );
};

Type.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isMale: PropTypes.bool,
  type: PropTypes.oneOf([
    "American Cocker Spaniel",
    "Border Collie",
    "Dachshund"
  ]),
  onChangeAge: PropTypes.func
};

List of Available Types

any

A value of any data type

array

An array type of JavaScript.

arrayOf(type)

An array of a certain type

bool

A bool type of JavaScript.

element

A React element.

elementType

A React element type.

exact({ property: type, ... })

An object with warnings on extra properties.

In other words, only objects with exactly the same properties can be allowed.

func

A function type of JavaScript.

instanceOf(class)

An instance of a class.

node

Anything that can be rendered.

number

A number type of JavaScript.

object

An object type of JavaScript.

objectOf(type)

An object with property values of a certain type.

oneOf([value, ...])

Limited to specific values by treating it as an enum.

oneOfType([type, ...])

An object that could be one of many types.

shape({ property: type, ... })

An object taking on a particular shape.

string

A string type of JavaScript.

symbol

A symbol type of JavaScript.

Custom Type

You can make your own type like this.

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

If the customProp doesn't have the string 'matchme', the Error is raised.

customProp: function(props, propName, componentName) {
  const value = props[propName];
  if (value > 10) {
    return new Error(
      `Invalid prop ${propName} supplied to ${componentName} Validation failed.`
    );
  }
}

If the customProp has greater than ten, the Error is raised.

customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  if (!/matchme/.test(propValue[key])) {
    return new Error(
      `Invalid prop ${propFullName} supplied to ${componentName} Validation failed.`
    );
  }
})

If any element of customArrayProp doesn't have the string 'matchme', the Error is raised.