Typechecking With PropTypes – React

Note:

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

We provide a codemod script to automate the conversion.

As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypes property:

import
 PropTypes 
from
 
'prop-types'
;

class
 
Greeting
 
extends
 
React
.
Component 
{
  
render
(
)
 
{
    
return
 
(
      
<
h1
>
Hello, 
{
this
.
props
.
name
}
</
h1
>
    
)
;
  
}
}

Greeting
.
propTypes 
=
 
{
  
name
:
 PropTypes
.
string
}
;

In this example, we are using a class component, but the same functionality could also be applied to function components, or components created by React.memo or React.forwardRef.

PropTypes exports a range of validators that can be used to make sure the data you receive is valid. In this example, we’re using PropTypes.string. 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.

PropTypes

Here is an example documenting the different validators provided:

import
 PropTypes 
from
 
'prop-types'
;

MyComponent
.
propTypes 
=
 
{
   
   
  
optionalArray
:
 PropTypes
.
array
,
  
optionalBool
:
 PropTypes
.
bool
,
  
optionalFunc
:
 PropTypes
.
func
,
  
optionalNumber
:
 PropTypes
.
number
,
  
optionalObject
:
 PropTypes
.
object
,
  
optionalString
:
 PropTypes
.
string
,
  
optionalSymbol
:
 PropTypes
.
symbol
,

   
   
  
optionalNode
:
 PropTypes
.
node
,

   
  
optionalElement
:
 PropTypes
.
element
,

   
  
optionalElementType
:
 PropTypes
.
elementType
,

   
   
  
optionalMessage
:
 PropTypes
.
instanceOf
(
Message
)
,

   
   
  
optionalEnum
:
 PropTypes
.
oneOf
(
[
'News'
,
 
'Photos'
]
)
,

   
  
optionalUnion
:
 PropTypes
.
oneOfType
(
[
    PropTypes
.
string
,
    PropTypes
.
number
,
    PropTypes
.
instanceOf
(
Message
)
  
]
)
,

   
  
optionalArrayOf
:
 PropTypes
.
arrayOf
(
PropTypes
.
number
)
,

   
  
optionalObjectOf
:
 PropTypes
.
objectOf
(
PropTypes
.
number
)
,

   
  
optionalObjectWithShape
:
 PropTypes
.
shape
(
{
    
color
:
 PropTypes
.
string
,
    
fontSize
:
 PropTypes
.
number
  
}
)
,

   
  
optionalObjectWithStrictShape
:
 PropTypes
.
exact
(
{
    
name
:
 PropTypes
.
string
,
    
quantity
:
 PropTypes
.
number
  
}
)
,
   

   
   
  
requiredFunc
:
 PropTypes
.
func
.
isRequired
,

   
  
requiredAny
:
 PropTypes
.
any
.
isRequired
,

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

   
   
   
   
   
  
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.'
      
)
;
    
}
  
}
)
}
;

Requiring Single Child

With PropTypes.element you can specify that only a single child can be passed to a component as children.

import
 PropTypes 
from
 
'prop-types'
;

class
 
MyComponent
 
extends
 
React
.
Component 
{
  
render
(
)
 
{
     
    
const
 children 
=
 
this
.
props
.
children
;
    
return
 
(
      
<
div
>

        
{
children
}

      
</
div
>
    
)
;
  
}
}

MyComponent
.
propTypes 
=
 
{
  
children
:
 PropTypes
.
element
.
isRequired
}
;

Default Prop Values

You can define default values for your props by assigning to the special defaultProps property:

class
 
Greeting
 
extends
 
React
.
Component 
{
  
render
(
)
 
{
    
return
 
(
      
<
h1
>
Hello, 
{
this
.
props
.
name
}
</
h1
>
    
)
;
  
}
}

 
Greeting
.
defaultProps 
=
 
{
  
name
:
 
'Stranger'
}
;

 
const
 root 
=
 ReactDOM
.
createRoot
(
document
.
getElementById
(
'example'
)
)
;
 
root
.
render
(
<
Greeting
 
/>
)
;

Since ES2022 you can also declare defaultProps as static property within a React component class. For more information, see the class public static fields. This modern syntax will require a compilation step to work within older browsers.

class
 
Greeting
 
extends
 
React
.
Component 
{
  
static
 defaultProps 
=
 
{
    
name
:
 
'stranger'
  
}

  
render
(
)
 
{
    
return
 
(
      
<
div
>
Hello, 
{
this
.
props
.
name
}
</
div
>
    
)
  
}
}

The defaultProps will be used to ensure that this.props.name will have a value if it was not specified by the parent component. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

Function Components

If you are using function components in your regular development, you may want to make some small changes to allow PropTypes to be properly applied.

Let’s say you have a component like this:

export
 
default
 
function
 
HelloWorldComponent
(
{
 name 
}
)
 
{
  
return
 
(
    
<
div
>
Hello, 
{
name
}
</
div
>
  
)
}

To add PropTypes, you may want to declare the component in a separate function before exporting, like this:

function
 
HelloWorldComponent
(
{
 name 
}
)
 
{
  
return
 
(
    
<
div
>
Hello, 
{
name
}
</
div
>
  
)
}

export
 
default
 HelloWorldComponent

Then, you can add PropTypes directly to the HelloWorldComponent:

import
 PropTypes 
from
 
'prop-types'

function
 
HelloWorldComponent
(
{
 name 
}
)
 
{
  
return
 
(
    
<
div
>
Hello, 
{
name
}
</
div
>
  
)
}

HelloWorldComponent
.
propTypes 
=
 
{
  
name
:
 PropTypes
.
string
}

export
 
default
 HelloWorldComponent