{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install prop-types-extra"],"cli":null},"imports":["import { elementType } from 'prop-types-extra';","import elementType from 'prop-types-extra/lib/elementType';","import { all } from 'prop-types-extra';","import { deprecated } from 'prop-types-extra';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}