{"id":11590,"library":"prop-types-extra","title":"React PropType Utilities","description":"prop-types-extra is a utility library designed to augment React's prop-validation capabilities by providing an extended set of PropTypes. It builds upon the foundational `prop-types` package, offering specialized validators that address common and complex validation scenarios in React component development. Key validators include `all`, which enables combining multiple validation rules; `componentOrElement`, for validating props expecting either a React component or a DOM element reference; `deprecated`, a utility to log deprecation warnings for specific props; `elementType`, for ensuring a prop is a valid React element type (e.g., a string for a DOM element or a component constructor); and `isRequiredForA11y`, which enforces accessibility requirements. The package is currently at version 1.1.1. As a supplementary tool for `prop-types`, its release cadence is typically stable, with updates driven primarily by React's evolution or specific bug fixes rather than frequent feature additions. It differentiates itself by providing ready-to-use, advanced validation patterns, thereby simplifying the creation of robust and semantically correct React components.","status":"maintenance","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/react-bootstrap/prop-types-extra","tags":["javascript","react","proptypes"],"install":[{"cmd":"npm install prop-types-extra","lang":"bash","label":"npm"},{"cmd":"yarn add prop-types-extra","lang":"bash","label":"yarn"},{"cmd":"pnpm add prop-types-extra","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications, providing the rendering core.","package":"react","optional":false},{"reason":"Explicit dependency for the base PropTypes object, typically used alongside prop-types-extra validators.","package":"prop-types","optional":false}],"imports":[{"note":"Preferred for general use. The CommonJS `require` syntax is less modern and may not be supported in all build environments.","wrong":"const { elementType } = require('prop-types-extra');","symbol":"elementType","correct":"import { elementType } from 'prop-types-extra';"},{"note":"Use this direct path import to cherry-pick individual validators and optimize bundle size. Importing a named export from the `lib/` path is incorrect.","wrong":"import { elementType } from 'prop-types-extra/lib/elementType';","symbol":"elementType (direct path)","correct":"import elementType from 'prop-types-extra/lib/elementType';"},{"note":"Standard named import for the `all` validator. The CommonJS `require` syntax is less modern.","wrong":"const all = require('prop-types-extra').all;","symbol":"all","correct":"import { all } from 'prop-types-extra';"},{"note":"Standard named import for the `deprecated` validator. Direct path import is `import deprecated from 'prop-types-extra/lib/deprecated';`.","wrong":"import deprecated from 'prop-types-extra/lib/deprecated';","symbol":"deprecated","correct":"import { deprecated } from 'prop-types-extra';"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\nimport { all } from 'prop-types-extra';\n\ninterface MyComponentProps {\n  vertical: boolean;\n  block: boolean;\n}\n\nconst MyComponent: React.FC<MyComponentProps> = ({ vertical, block }) => {\n  return (\n    <div style={{\n      display: block ? 'block' : 'inline',\n      flexDirection: vertical ? 'column' : 'row'\n    }}>\n      My Component Content\n    </div>\n  );\n};\n\nMyComponent.propTypes = {\n  vertical: PropTypes.bool.isRequired,\n  block: all(\n    PropTypes.bool.isRequired,\n    ({ block, vertical }: MyComponentProps) => (\n      block && !vertical ?\n        new Error('`block` requires `vertical` to be set to have any effect') :\n        null\n    ),\n  ) as PropTypes.Validator<boolean>, // Type cast for custom validator\n};\n\n// Example usage:\n// In a React application, this component would be rendered:\n// import ReactDOM from 'react-dom';\n// const rootElement = document.getElementById('root');\n// ReactDOM.render(<MyComponent vertical={true} block={true} />, rootElement);\n// <MyComponent vertical={false} block={true} /> // Will log a propTypes warning in development\n","lang":"typescript","description":"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."},"warnings":[{"fix":"For production builds or smaller bundles, import individual validators directly from their paths, e.g., `import elementType from 'prop-types-extra/lib/elementType';`.","message":"Importing `prop-types-extra` directly imports all validators, which can increase bundle size.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Incorrect import statement for `elementType` or attempting to use CommonJS `require` syntax when the environment expects ESM.","error":"TypeError: Cannot read properties of undefined (reading 'elementType')"},{"fix":"Add `import PropTypes from 'prop-types';` at the top of your file. Ensure the `prop-types` package is installed (`npm install prop-types`).","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.","error":"TypeError: PropTypes.bool is not a function"},{"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.","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.","error":"Warning: Failed prop type: The prop `block` requires `vertical` to be set to have any effect in `MyComponent`."}],"ecosystem":"npm"}