React PropTypes

PropTypes validate props at runtime.

Install

npm install prop-types

Basic Usage

import PropTypes from 'prop-types';

function User({ name, age, email }) {
  return <div>{name}, {age}</div>;
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string
};

Common Types

PropTypes.string
PropTypes.number
PropTypes.bool
PropTypes.array
PropTypes.object
PropTypes.func
PropTypes.node // Anything renderable
PropTypes.element // React element

Array/Object Of

PropTypes.arrayOf(PropTypes.string)
PropTypes.objectOf(PropTypes.number)

Shape

PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})

Default Props

User.defaultProps = {
  age: 18,
  email: 'no-email@example.com'
};

Remember

• Use in development
• Catches prop bugs early
• Remove in production build
• TypeScript is better alternative

Congratulations! You've completed intermediate React! Ready for advanced topics!