React
is a Javascript library and Javascript
is a loosely typed language so by default it does not provide any type checking because of which it's very easy to create bugs in your application when we pass the wrong type of data and it will easily crash your application.
There are various static type checkers used in larger application like Flow
or Typescript
which helps to catch errors at compile time.
But if you want to perform some simple type checking in your React application and don’t want to add annotations at every level like provided by Flow
then PropTypes
is the preferred way.
PropTypes
were part of the React core module itself initially but starting from React version 15.5
, it’s moved to prop-types
library to keep React library light and small.
You will find prop-types
used in a lot of popular libraries for type checking.
Installation
To install the prop-types
library execute the following command in terminal:
yarn add prop-types
OR
npm install prop-types
Usage
The library provides a default export so we can name it whatever we want but it’s generally imported as:
import PropTypes from 'prop-types'
If you have installed the React Snippet Extension for React in your IDE as described in my previous article HERE then you can just type impt
text to add the import for it.
Suppose we have a User
component which displayed details of a user:
const User = ({ name, age, location, isMarried }) => {
return (
<div className="user">
<p>Name: {name}</p>
<p>Age: {age}</p>
<p>Location: {location}</p>
<p>Married: {isMarried ? 'Yes' : 'No'}</p>
</div>
);
};
Then we can add type checking to check each of the prop
passed to the component is of the correct type as shown below:
User.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
location: PropTypes.string,
isMarried: PropTypes.bool
};
Note: p
is lowercase in User.propTypes
and while defining type, it's uppercase like PropTypes.string
.
Here, we have used PropTypes
for the functional component but it works the same for class components.
Now, suppose If we pass the age
as a string to the User
component:
const user = {
name: 'David',
age: '35',
location: 'New York',
isMarried: true
};
ReactDOM.render(<User {...user} />,document.getElementById("root"));
Then you will get a warning in the console when you run the application:
Here's a Code Sandbox Demo.
So using PropTypes
allows us to easily find and fix the issue which might come due to an invalid type before the application is shipped to production.
Apart from number
, string
and bool
, PropTypes
supports various other types like:
PropTypes.func
: Specifies the type to be a functionPropTypes.array
: Specifies the type to be an arrayPropTypes.arrayOf
: Specifies the type to be an array of a specific type like an array of strings
const names = ['David', 'Jack', 'Mike', 'Tim', 9];
...
<Users names={names} />
...
Users.propTypes = {
names: PropTypes.arrayOf(PropTypes.string)
};
You will receive a warning in this case because the value 9
in the array is not of type string.
PropTypes.object
: Specifies the type to be an objectPropTypes.symbol
: Specifies the type to be a symbolPropTypes.node
: Specifies the type to be a node which means anything which React can render likenumbers
,strings
,elements
, DOM elements or anarray
but notboolean
orobjects
because React does not print boolean values in JSX and for objects, React will throw an error when used in JSXPropTypes.element
: Specifies the type to be a React element
User.propTypes = {
info: PropTypes.element
}
...
<User info={<Info />} />
PropTypes.any
: Specifies the type to be any value likestring
,number
,boolean
,object
PropTypes.exact
: Specifies the type to be of the exact shape
User.propTypes = {
info: PropTypes.exact({
name: PropTypes.string,
age: PropTypes.number,
location: PropTypes.string
})
};
...
const user = {
name: 'David',
age: 35,
location: 'New York'
};
<User info={user} />
If you pass properties different than the one mentioned in the PropType
, then you will get a warning.
PropTypes.shape
: Specifies the type to be of some shape. It’s similar toexact
except that, you can include less or additional props.
User.propTypes = {
info: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
location: PropTypes.string
})
};
PropTypes.instanceOf
: Specifies the type to be an instance of something
User.propTypes = {
date: PropTypes.instanceOf(Date)
};
...
const today_date = new Date();
<User date={today_date} />
PropTypes.oneOf
: Specifies the type to be one of the values mentioned
Months.propTypes = {
day: PropTypes.oneOf(['Monday', 'Tuesday', 'Wendesday'])
};
...
<Months day="Monday" />
If you pass the wrong value, then you will get a warning like this:
By default every prop is optional. To make any prop as required we can add
.required
to thePropType
.
Image.propTypes = {
src: PropTypes.string.isRequired
};
Suppose we have an Image
component.
const Image = (props) => {
const { src, alt } = props;
return (
<div className="image">
<img src={src} alt={alt} width="200" height="200" />
</div>
);
};
Image.propTypes = {
src: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired
};
Then we can display the Image
as:
ReactDOM.render(<Image />, document.getElementById("root"));
As you can see, we have just used <Image />
and we are not passing the src and alt props so you will see a warning in the console.
But, if we pass the required values like this
<Image src="http://unsplash.it/200/200?random" alt="Random image" />
then you will not get a warning message in the console.
Here's a Code Sandbox Demo.
We can add
.required
to all the PropTypes we have seen above.
Note: The PropType
checks are only done in development mode. React will not perform PropType
checks when the application is running in production mode.
Thanks for reading!
Want to learn all ES6+ features in detail including let and const, promises, various promise methods, array and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?
Check out my Mastering Modern JavaScript book. This book covers all the pre-requisites for learning React and helps you to become better at JavaScript and React.
Check out free preview contents of the book here.
Also, you can check out my free Introduction to React Router course to learn React Router from scratch.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.