React PropTypes
How to use PropTypes to set the required type of a prop
Since JavaScript is a dynamically typed language, we don’t really have a way to enforce the type of a variable at compile time, and if we pass invalid types, they will fail at runtime or give weird results if the types are compatible but not what we expect.
Flow and TypeScript help a lot, but React has a way to directly help with props types, and even before running the code, our tools (editors, linters) can detect when we are passing the wrong values:
import PropTypes from 'prop-types'
import React from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
BlogPostExcerpt.propTypes = {
title: PropTypes.string,
description: PropTypes.string
}
export default BlogPostExcerpt
Which types can we use
These are the fundamental types we can accept:
- PropTypes.array
- PropTypes.bool
- PropTypes.func
- PropTypes.number
- PropTypes.object
- PropTypes.string
- PropTypes.symbol
We can accept one of two types:
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
We can accept one of many values:
PropTypes.oneOf(['Test1', 'Test2']),
We can accept an instance of a class:
PropTypes.instanceOf(Something)
We can accept any React node:
PropTypes.node
or even any type at all:
PropTypes.any
Arrays have a special syntax that we can use to accept an array of a particular type:
PropTypes.arrayOf(PropTypes.string)
Objects, we can compose an object properties by using
PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
Requiring properties
Appending isRequired
to any PropTypes option will cause React to return an error if that property is missing:
PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025