{"id":14877,"library":"react-prop-types","title":"Additional React PropTypes Validators","description":"The `react-prop-types` library provides a collection of supplementary validators for React's original `PropTypes` system. Introduced to extend the native `React.PropTypes` with utilities such as `elementType`, `all`, `componentOrElement`, `deprecated`, and `isRequiredForA11y`, it addresses common validation patterns not covered by React itself. The current stable version is 0.4.0, which reflects its development primarily during the React 0.14.x to early 15.x era. This package is specifically designed for use with older React applications where `PropTypes` were still part of the `react` package, rather than the separate `prop-types` package introduced with React 15.5.0. Its release cadence is effectively inactive, and it differentiates itself by offering specific, reusable validation functions for accessibility, deprecation warnings, and type checking for React components and DOM elements.","status":"abandoned","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/react-bootstrap/react-prop-types","tags":["javascript","react","proptypes"],"install":[{"cmd":"npm install react-prop-types","lang":"bash","label":"npm"},{"cmd":"yarn add react-prop-types","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-prop-types","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires the `React.PropTypes` system, which was part of the `react` package before version 15.5.0.","package":"react","optional":false}],"imports":[{"note":"For tree-shaking and smaller bundle sizes, direct import from the lib subdirectory is recommended. The named import from the package root also works but might pull in more code.","wrong":"import { elementType } from 'react-prop-types';","symbol":"elementType","correct":"import elementType from 'react-prop-types/lib/elementType';"},{"note":"While direct path imports are suggested for some validators, `all` is typically imported as a named export from the root.","wrong":"import all from 'react-prop-types/lib/all';","symbol":"all","correct":"import { all } from 'react-prop-types';"},{"note":"This library predates widespread ESM in Node, but bundlers support `import`. For CJS, direct `require` from the specific file path is common. The `_resetWarned()` method is exposed on the default export for testing.","wrong":"const deprecated = require('react-prop-types').deprecated;","symbol":"deprecated","correct":"import deprecated from 'react-prop-types/lib/deprecated';"},{"note":"Like `elementType`, direct import from the `lib` path is recommended for better optimization.","wrong":"import { componentOrElement } from 'react-prop-types';","symbol":"componentOrElement","correct":"import componentOrElement from 'react-prop-types/lib/componentOrElement';"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types'; // Or `React.PropTypes` in older React versions\nimport elementType from 'react-prop-types/lib/elementType';\nimport { all } from 'react-prop-types';\nimport deprecated from 'react-prop-types/lib/deprecated';\n\nconst MyComponent = ({ Component, optionalComponent, block, vertical, oldProp }) => (\n  <div>\n    <h1>Hello from MyComponent</h1>\n    {Component && <Component />} \n    {optionalComponent && React.isValidElement(optionalComponent) && optionalComponent}\n    <p>Block: {String(block)}, Vertical: {String(vertical)}</p>\n    {oldProp && <p>Old Prop Value: {oldProp}</p>}\n  </div>\n);\n\nMyComponent.propTypes = {\n  Component: elementType.isRequired,\n  optionalComponent: elementType,\n  vertical: PropTypes.bool.isRequired,\n  block: all(\n    PropTypes.bool.isRequired,\n    ({ block, vertical }) => (\n      block && !vertical ?\n        new Error('`block` requires `vertical` to be set to have any effect') :\n        null\n    )\n  ),\n  oldProp: deprecated(PropTypes.string, 'Use `newProp` instead of `oldProp`.'),\n};\n\nMyComponent.defaultProps = {\n  block: false,\n  vertical: false\n};\n\n// Example usage (e.g., in an App.js):\n// import MyComponent from './MyComponent';\n// const AnotherComponent = () => <span>I'm another component!</span>;\n// <MyComponent Component={AnotherComponent} vertical block oldProp=\"deprecated value\" />\n\nexport default MyComponent;\n","lang":"javascript","description":"Demonstrates the setup and usage of various custom PropTypes like `elementType`, `all`, and `deprecated` within a React component."},"warnings":[{"fix":"For new React projects (>=15.5.0), use the `prop-types` package from npm (`npm install --save prop-types`). For existing older projects, ensure React version is < 15.5.0 or use a `prop-types` shim.","message":"This library relies on the global `React.PropTypes` object, which was deprecated in React 15.5.0 and removed in React 16. It is not directly compatible with modern React applications (React 15.5.0 and newer) without a compatibility layer like `prop-types` or equivalent shims. New applications should use the official `prop-types` package and implement custom validators if needed.","severity":"breaking","affected_versions":">=15.5.0"},{"fix":"Prefer direct imports from `react-prop-types/lib/<validatorName>` for individual validators to ensure optimal bundle size, especially in production builds.","message":"Using named imports from the package root (`import { elementType } from 'react-prop-types';`) might increase bundle size compared to direct imports from the `lib` subdirectory (`import elementType from 'react-prop-types/lib/elementType';`). The library structure is optimized for direct file imports for better tree-shaking.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"When using `deprecated`, ensure that deprecated props are eventually migrated to their recommended alternatives to eliminate console warnings. For testing scenarios, `deprecated._resetWarned()` can clear the warning cache.","message":"The `deprecated` validator within this library logs a warning to the console if a prop is used that is marked as deprecated. This is a design feature, not a problem with the validator itself, but developers should be aware that their console might show warnings for intended deprecations.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Evaluate alternatives from maintained libraries or transition to custom validators based on the official `prop-types` package for modern React applications. Regularly audit project dependencies for known vulnerabilities.","message":"As an unmaintained library tied to an older React ecosystem, `react-prop-types` may not receive updates for security vulnerabilities or modern JavaScript/TypeScript compatibility. Using unmaintained dependencies can pose supply chain risks.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project uses an older React version (e.g., <15.5.0) compatible with `React.PropTypes`. For newer React versions, you must either replace `react-prop-types` with alternative validation logic or provide a global `PropTypes` object using the `prop-types` package if you are migrating an older codebase.","cause":"This error typically occurs when `React.PropTypes` is accessed in a React version where it has been removed (React 16+) or is expected to be imported from the `prop-types` package (React 15.5.0+). The `react-prop-types` library internally relies on `React.PropTypes`.","error":"TypeError: Cannot read properties of undefined (reading 'bool') OR TypeError: Cannot read property 'bool' of undefined"},{"fix":"Verify that `react-prop-types` is installed (`npm i react-prop-types`) and that the import path precisely matches the file structure, e.g., `import elementType from 'react-prop-types/lib/elementType';`.","cause":"The module path specified in the `import` or `require` statement is incorrect, or the `react-prop-types` package is not installed.","error":"Module not found: Error: Can't resolve 'react-prop-types/lib/elementType' OR Cannot find module 'react-prop-types/lib/elementType'"}],"ecosystem":"npm"}