Additional React PropTypes Validators

Common errors

• TypeError: Cannot read properties of undefined (reading 'bool') OR TypeError: Cannot read property 'bool' of undefined

  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`.
  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.

• Module not found: Error: Can't resolve 'react-prop-types/lib/elementType' OR Cannot find module '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.
  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';`.

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Prefer direct imports from `react-prop-types/lib/<validatorName>` for individual validators to ensure optimal bundle size, especially in production builds.
• deprecated 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-prop-types npm
• yarn add react-prop-types yarn
• pnpm add react-prop-types pnpm

Imports

• elementType
  wrong:

  import { elementType } from 'react-prop-types';

  correct:

  import elementType from 'react-prop-types/lib/elementType';

  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.
• all
  wrong:

  import all from 'react-prop-types/lib/all';

  correct:

  import { all } from 'react-prop-types';

  While direct path imports are suggested for some validators, `all` is typically imported as a named export from the root.
• deprecated
  wrong:

  const deprecated = require('react-prop-types').deprecated;

  correct:

  import deprecated from 'react-prop-types/lib/deprecated';

  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.
• componentOrElement
  wrong:

  import { componentOrElement } from 'react-prop-types';

  correct:

  import componentOrElement from 'react-prop-types/lib/componentOrElement';

  Like `elementType`, direct import from the `lib` path is recommended for better optimization.

Quickstart

Demonstrates the setup and usage of various custom PropTypes like `elementType`, `all`, and `deprecated` within a React component.

import React from 'react';
import PropTypes from 'prop-types'; // Or `React.PropTypes` in older React versions
import elementType from 'react-prop-types/lib/elementType';
import { all } from 'react-prop-types';
import deprecated from 'react-prop-types/lib/deprecated';

const MyComponent = ({ Component, optionalComponent, block, vertical, oldProp }) => (
  <div>
    <h1>Hello from MyComponent</h1>
    {Component && <Component />} 
    {optionalComponent && React.isValidElement(optionalComponent) && optionalComponent}
    <p>Block: {String(block)}, Vertical: {String(vertical)}</p>
    {oldProp && <p>Old Prop Value: {oldProp}</p>}
  </div>
);

MyComponent.propTypes = {
  Component: elementType.isRequired,
  optionalComponent: elementType,
  vertical: PropTypes.bool.isRequired,
  block: all(
    PropTypes.bool.isRequired,
    ({ block, vertical }) => (
      block && !vertical ?
        new Error('`block` requires `vertical` to be set to have any effect') :
        null
    )
  ),
  oldProp: deprecated(PropTypes.string, 'Use `newProp` instead of `oldProp`.'),
};

MyComponent.defaultProps = {
  block: false,
  vertical: false
};

// Example usage (e.g., in an App.js):
// import MyComponent from './MyComponent';
// const AnotherComponent = () => <span>I'm another component!</span>;
// <MyComponent Component={AnotherComponent} vertical block oldProp="deprecated value" />

export default MyComponent;