React prop type-checking: PropTypes
While many React applications may use TypeScript for its built in type checking if you’re working in a normal react application you can use the prop-types library to do some of the same work. Specifically this library will allow you to check that the props are the correct type and that they exist.
Installation
If you are working with React Version 16 or greater you can install the library with:
npm install — save prop-types
If you are working on an older version of React, there's no need to install, prop-types is built right into React!
Importing
To get started working with prop-types import it into a component with this line of code towards the top of your file:
import PropTypes from ‘prop-types’
If you’re working in an older version of React you can access prop-types with React.PropTypes
.
Usage
The usage of prop-types will be similar to both versions. Lets start with the newer library version. First you need to define what the prop-types will be for your component by using the .propTypes
method on the component like so:
Example.propTypes = {}
Inside the object is where we will declare what names and expected types of the props will be with a key value pair. To define the type we use PropTypes.
and then whatever type we expect.
Example.propTypes = { name: PropTypes.string};
For older React versions the initial setup is the same but to set the prop’s type you need to access PropTypes
by doing React.PropTypes
You can accept strings
, arrays
, Booleans
, functions
, numbers
, objects
and a whole list of other types. For more detailed list and usage check out the official documentation.
Check for presence
To make sure a prop is always being passed along regardless of its type you can add the .isRequired
method to the end of its type definition like so:
Example.propTypes = { name: PropTypes.string.isRequired};
Case Study | Try it out !
In the example below I’ve set up a component that accepts a prop, a name, and instead of passing it a string I’ve passed it a number (oops!). The console displays a warning that there is an Invalid prop name
of type number
and that it expected a string
instead.
Feel free to play around with this example I’ve set up. What would happen if you don’t pass in a value at all?