Registry / type-stubs / prop-types-extra

prop-types-extra

JSON →
library1.1.1jsnpmunverified

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.

npm install prop-types-extra
INSTALL
IMPORT
SIG · PROP-TYPES-EXTRA
P
prop-types-extra
type-stubsjavascriptv1.1.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

elementType
import { elementType } from 'prop-types-extra';
const { elementType } = require('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)
import elementType from 'prop-types-extra/lib/elementType';
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
import { all } from 'prop-types-extra';
const all = require('prop-types-extra').all;
Standard named import for the `all` validator. The CommonJS `require` syntax is less modern.
deprecated
import { deprecated } from 'prop-types-extra';
import deprecated from 'prop-types-extra/lib/deprecated';
Standard named import for the `deprecated` validator. Direct path import is `import deprecated from 'prop-types-extra/lib/deprecated';`.

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
Debug
Known issues
gotchaImporting `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';`.
affects: >=1.0.0
gotchaThis 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.
affects: >=1.0.0
gotchaThis 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.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'elementType')
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
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`.
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.
Upgrade
Version history
1.1.1latest on npm
Audit
Dependencies
reactrequiredPeer dependency for React applications, providing the rendering core.
prop-typesrequiredExplicit dependency for the base PropTypes object, typically used alongside prop-types-extra validators.
Agent activity
24 hits · last 30 days
node
22
Amazon
1
OpenAI (training)
1
Resources
prop-types-extra — npm install prop-types-extra · libregistry