React PropType Utilities

Common errors

• TypeError: Cannot read properties of undefined (reading 'elementType')

  cause Incorrect import statement for `elementType` or attempting to use CommonJS `require` syntax when the environment expects ESM.
  fix Ensure you are using `import { elementType } from 'prop-types-extra';` for named exports or `import elementType from 'prop-types-extra/lib/elementType';` for direct path imports. Verify your build system correctly handles ESM modules.

• TypeError: PropTypes.bool is not a function

  cause The base `PropTypes` object is not correctly imported or available. `prop-types-extra` provides *additional* validators, but expects the core `PropTypes` object from the `prop-types` package to be present.
  fix Add `import PropTypes from 'prop-types';` at the top of your file. Ensure the `prop-types` package is installed (`npm install prop-types`).

• Warning: Failed prop type: The prop `block` requires `vertical` to be set to have any effect in `MyComponent`.

  cause This is an expected prop type validation failure due to the component's usage violating a custom validation rule defined using `prop-types-extra`'s `all` validator.
  fix Adjust the component's props to satisfy the validation rules, e.g., ensure `vertical` is `true` when `block` is `true` as per the `all` validator's custom rule.

Warnings

• gotcha Importing `prop-types-extra` directly imports all validators, which can increase bundle size.
  Fix: For production builds or smaller bundles, import individual validators directly from their paths, e.g., `import elementType from 'prop-types-extra/lib/elementType';`.
• gotcha This library extends the standard `prop-types` library and does not replace it. You still need to import `PropTypes` from `prop-types` (or `React.PropTypes` in very old React versions) for basic validations like `PropTypes.string`.
  Fix: Ensure you have `import PropTypes from 'prop-types';` at the top of your file alongside imports from `prop-types-extra`. If not already installed, add `prop-types` to your project dependencies.
• gotcha This package is designed for environments where `PropTypes` has been extracted into the standalone `prop-types` package (React 15.5.0 and later). Using it with significantly older React versions (pre-15.5.0) might lead to incompatibility or `PropTypes` not being correctly resolved.
  Fix: Ensure your React version is 15.5.0 or newer and that `prop-types` is installed as a separate dependency. The `peerDependencies` of `prop-types-extra` list `react: >=0.14.0`, but functional compatibility with the `prop-types` package specifically aligns better with React >=15.5.0.

Install

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

Imports

• elementType
  wrong:

  const { elementType } = require('prop-types-extra');

  correct:

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

  Preferred for general use. The CommonJS `require` syntax is less modern and may not be supported in all build environments.
• elementType (direct path)
  wrong:

  import { elementType } from 'prop-types-extra/lib/elementType';

  correct:

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

  Use this direct path import to cherry-pick individual validators and optimize bundle size. Importing a named export from the `lib/` path is incorrect.
• all
  wrong:

  const all = require('prop-types-extra').all;

  correct:

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

  Standard named import for the `all` validator. The CommonJS `require` syntax is less modern.
• deprecated
  wrong:

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

  correct:

  import { deprecated } from 'prop-types-extra';

  Standard named import for the `deprecated` validator. Direct path import is `import deprecated from 'prop-types-extra/lib/deprecated';`.

Quickstart

Demonstrates the use of the `all` validator to combine standard PropTypes with a custom semantic validation function, showing how to enforce conditional prop dependencies for robust component usage.

import React from 'react';
import PropTypes from 'prop-types';
import { all } from 'prop-types-extra';

interface MyComponentProps {
  vertical: boolean;
  block: boolean;
}

const MyComponent: React.FC<MyComponentProps> = ({ vertical, block }) => {
  return (
    <div style={{
      display: block ? 'block' : 'inline',
      flexDirection: vertical ? 'column' : 'row'
    }}>
      My Component Content
    </div>
  );
};

MyComponent.propTypes = {
  vertical: PropTypes.bool.isRequired,
  block: all(
    PropTypes.bool.isRequired,
    ({ block, vertical }: MyComponentProps) => (
      block && !vertical ?
        new Error('`block` requires `vertical` to be set to have any effect') :
        null
    ),
  ) as PropTypes.Validator<boolean>, // Type cast for custom validator
};

// Example usage:
// In a React application, this component would be rendered:
// import ReactDOM from 'react-dom';
// const rootElement = document.getElementById('root');
// ReactDOM.render(<MyComponent vertical={true} block={true} />, rootElement);
// <MyComponent vertical={false} block={true} /> // Will log a propTypes warning in development