DEV Community


Posted on


Prop Types

Before the release of React 15.5.0 version prop-Types is available in the react package but in later versions of React have to add a dependency in your project. You can add the dependency in your project by using the command given below:

npm install prop-types --save
Enter fullscreen mode Exit fullscreen mode

Import Elements

  import PropTypes from 'prop-types'
Enter fullscreen mode Exit fullscreen mode

SO we get a something Different type of Prop-Types below:

Basic types

PropTypes.any: The prop can be of any data type
PropTypes.bool: The prop should be a Boolean
PropTypes.number: The prop should be a number
PropTypes.string: The prop should be a string
PropTypes.func: The prop should be a function
PropTypes.array: The prop should be an array
PropTypes.object: The prop should be an object
PropTypes.symbol: The prop should be a symbol

and Here we can example
Component.propTypes = {
anyProp: PropTypes.any,
booleanProp: PropTypes.bool,
numberProp: PropTypes.number,
stringProp: PropTypes.string,
functionProp: PropTypes.func

Renderable types

PropTypes also exports the following validators for ensuring that the value passed to a prop can be rendered by React.
Component.propTypes = {
nodeProp: PropTypes.node,
elementProp: PropTypes.element

Instance types

In cases where you require a prop to be an instance of a particular JavaScript class, you can use the PropTypes.instanceOf validator. This leverages the underlying JavaScript instanceof operator.

Component.propTypes = {
personProp: PropTypes.instanceOf(Person)

Multiple types

PropTypes also exports validators that can allow a limited set of values or multiple sets of data types for a prop. Here they are:

  • PropTypes.oneOf: The prop is limited to a specified set of values, treating it like an enum
  • PropTypes.oneOfType: The prop should be one of a specified set of types, behaving like a union of types

Component.propTypes = {
enumProp: PropTypes.oneOf([true, false, 0, 'Unknown']),
unionProp: PropTypes.oneOfType([

`*and here also *

Collection types

Required types

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post