{"id":11591,"library":"prop-types","title":"React Prop Types","description":"prop-types is a JavaScript library providing runtime type checking for React component props and similar object structures. It enables developers to define the expected types, shapes, and requirements for properties, issuing helpful warnings in development environments when mismatches occur. Its current stable version is 15.8.1. While once integrated directly into React, it was externalized in React v15.5 to encourage the adoption of static type checking solutions like TypeScript or Flow. prop-types continues to be maintained for projects that prefer runtime validation or are not yet using static typing, serving as a robust, albeit runtime-only, solution for ensuring data integrity within component APIs. It offers a comprehensive set of validators for primitives, instances, enums, arrays, objects, and more, making it flexible for various use cases. The library generally follows a stable release cadence, primarily for maintenance and compatibility updates rather than new features, given its mature state and the ecosystem's shift towards compile-time type checking.","status":"maintenance","version":"15.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/prop-types","tags":["javascript","react"],"install":[{"cmd":"npm install prop-types","lang":"bash","label":"npm"},{"cmd":"yarn add prop-types","lang":"bash","label":"yarn"},{"cmd":"pnpm add prop-types","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"PropTypes is the default export of the module for ES Modules.","wrong":"import { PropTypes } from 'prop-types';","symbol":"PropTypes","correct":"import PropTypes from 'prop-types';"},{"note":"Use this CommonJS syntax in older Node.js environments or bundled applications that do not support ES Modules.","wrong":"import PropTypes from 'prop-types';","symbol":"PropTypes (CommonJS)","correct":"const PropTypes = require('prop-types');"},{"note":"Individual validators like `string`, `number`, `array`, etc., are properties of the `PropTypes` object and are not imported directly.","symbol":"Specific validators","correct":"MyComponent.propTypes = { optionalString: PropTypes.string };"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass MyMessage {\n  constructor(text) {\n    this.text = text;\n  }\n}\n\nclass MyComponent extends React.Component {\n  render() {\n    // Example of using props inside render\n    return (\n      <div>\n        <p>String: {this.props.optionalString}</p>\n        <p>Number: {this.props.optionalNumber}</p>\n        <p>Enum: {this.props.optionalEnum}</p>\n        <p>Message Text: {this.props.optionalMessage ? this.props.optionalMessage.text : 'N/A'}</p>\n        <p>Required Property: {this.props.optionalObjectWithShape.requiredProperty}</p>\n      </div>\n    );\n  }\n}\n\nMyComponent.propTypes = {\n  optionalArray: PropTypes.array,\n  optionalBool: PropTypes.bool,\n  optionalFunc: PropTypes.func,\n  optionalNumber: PropTypes.number,\n  optionalObject: PropTypes.object,\n  optionalString: PropTypes.string,\n  optionalNode: PropTypes.node,\n  optionalElement: PropTypes.element,\n  optionalElementType: PropTypes.elementType,\n  optionalMessage: PropTypes.instanceOf(MyMessage),\n  optionalEnum: PropTypes.oneOf(['News', 'Photos']).isRequired,\n  optionalUnion: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.instanceOf(MyMessage)\n  ]),\n  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),\n  optionalObjectOf: PropTypes.objectOf(PropTypes.number),\n  optionalObjectWithShape: PropTypes.shape({\n    optionalProperty: PropTypes.string,\n    requiredProperty: PropTypes.number.isRequired\n  }).isRequired,\n  // A required object with an exact set of properties and types\n  // This will warn if extra properties are supplied, unlike .shape\n  strictObject: PropTypes.exact({\n    a: PropTypes.number,\n    b: PropTypes.string.isRequired\n  })\n};\n\n// Example usage (in a React application)\n// function App() {\n//   return (\n//     <MyComponent\n//       optionalString=\"hello\"\n//       optionalNumber={123}\n//       optionalEnum=\"News\"\n//       optionalMessage={new MyMessage('Hello from PropType!')}\n//       optionalObjectWithShape={{ requiredProperty: 42 }}\n//       strictObject={{ a: 1, b: 'two' }}\n//     />\n//   );\n// }\n// export default App;\n\n// To prevent 'React' is defined but never used, mock a render if not in a React app context\nif (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\n  console.log('PropTypes example component defined. Run in a React app for full effect.');\n}\n","lang":"javascript","description":"This quickstart defines a React component `MyComponent` and illustrates the declaration of various prop types using `prop-types`, including primitive types, `instanceOf`, `oneOf`, `oneOfType`, `arrayOf`, `objectOf`, `shape`, and `exact` validators. It also shows chaining `isRequired`."},"warnings":[{"fix":"Migrate from `React.PropTypes` to `import PropTypes from 'prop-types';` (or `const PropTypes = require('prop-types');`) and use `PropTypes` directly.","message":"In React v15.5, `PropTypes` was extracted from the `React` package into its own `prop-types` library. Direct access via `React.PropTypes` no longer works and will result in a runtime error.","severity":"breaking","affected_versions":">=15.5.0"},{"fix":"For compile-time type checking and stronger guarantees, consider migrating to static type checkers like TypeScript or Flow. Do not rely on prop-types for data validation in production environments.","message":"prop-types performs runtime checks and only provides warnings in development mode. It does not enforce types at compile-time and is not suitable for critical production validation or security checks.","severity":"gotcha","affected_versions":">=15.0.0"},{"fix":"For new projects, start with TypeScript or Flow. For existing projects, evaluate the cost-benefit of migrating away from `prop-types`.","message":"While still maintained, `prop-types` is considered a legacy solution by the React team, with a strong recommendation for developers to adopt static type checking solutions (like TypeScript or Flow) for new projects and substantial refactors.","severity":"deprecated","affected_versions":">=15.5.0"},{"fix":"Replace `PropTypes.shape({...})` with `PropTypes.exact({...})` when you need strict object property enforcement without allowing extras.","message":"The `.shape()` validator allows additional properties beyond those defined in the shape. If you need to restrict an object to an exact set of properties, use the `.exact()` validator instead.","severity":"gotcha","affected_versions":">=15.6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import PropTypes from 'prop-types';` (ES Modules) or `const PropTypes = require('prop-types');` (CommonJS) at the top of your file.","cause":"The `PropTypes` object was not correctly imported or is undefined, leading to attempts to access properties (like `array`) on a non-existent object.","error":"TypeError: Cannot read properties of undefined (reading 'array')"},{"fix":"Provide a value for the required prop when using the component, e.g., `<MyComponent myProp={someValue} />`, or ensure it's not `undefined` if optional.","cause":"A prop that was declared with `.isRequired` was either not provided to the component or was explicitly passed as `undefined`.","error":"Warning: Failed prop type: The prop `myProp` is marked as required in `MyComponent`, but its value is `undefined`."},{"fix":"Pass a prop of the correct type, e.g., `<MyComponent myProp={123} />` if `myProp` expects a `number`.","cause":"The actual type of the prop passed to the component does not match the type declared in `MyComponent.propTypes`.","error":"Warning: Failed prop type: Invalid prop `myProp` of type `string` supplied to `MyComponent`, expected `number`."},{"fix":"Add the necessary import statement for `PropTypes` at the top of the file: `import PropTypes from 'prop-types';` or `const PropTypes = require('prop-types');`.","cause":"The `prop-types` library was not imported or included in the scope where it is being used.","error":"ReferenceError: PropTypes is not defined"}],"ecosystem":"npm"}