{"library":"prop-types","title":"React Prop Types","description":"prop-types is a JavaScript library providing runtime type checking for React component props and similar object structures. It enables developers to define the expected types, shapes, and requirements for properties, issuing helpful warnings in development environments when mismatches occur. Its current stable version is 15.8.1. While once integrated directly into React, it was externalized in React v15.5 to encourage the adoption of static type checking solutions like TypeScript or Flow. prop-types continues to be maintained for projects that prefer runtime validation or are not yet using static typing, serving as a robust, albeit runtime-only, solution for ensuring data integrity within component APIs. It offers a comprehensive set of validators for primitives, instances, enums, arrays, objects, and more, making it flexible for various use cases. The library generally follows a stable release cadence, primarily for maintenance and compatibility updates rather than new features, given its mature state and the ecosystem's shift towards compile-time type checking.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install prop-types"],"cli":null},"imports":["import PropTypes from 'prop-types';","const PropTypes = require('prop-types');","MyComponent.propTypes = { optionalString: PropTypes.string };"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass MyMessage {\n  constructor(text) {\n    this.text = text;\n  }\n}\n\nclass MyComponent extends React.Component {\n  render() {\n    // Example of using props inside render\n    return (\n      <div>\n        <p>String: {this.props.optionalString}</p>\n        <p>Number: {this.props.optionalNumber}</p>\n        <p>Enum: {this.props.optionalEnum}</p>\n        <p>Message Text: {this.props.optionalMessage ? this.props.optionalMessage.text : 'N/A'}</p>\n        <p>Required Property: {this.props.optionalObjectWithShape.requiredProperty}</p>\n      </div>\n    );\n  }\n}\n\nMyComponent.propTypes = {\n  optionalArray: PropTypes.array,\n  optionalBool: PropTypes.bool,\n  optionalFunc: PropTypes.func,\n  optionalNumber: PropTypes.number,\n  optionalObject: PropTypes.object,\n  optionalString: PropTypes.string,\n  optionalNode: PropTypes.node,\n  optionalElement: PropTypes.element,\n  optionalElementType: PropTypes.elementType,\n  optionalMessage: PropTypes.instanceOf(MyMessage),\n  optionalEnum: PropTypes.oneOf(['News', 'Photos']).isRequired,\n  optionalUnion: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.instanceOf(MyMessage)\n  ]),\n  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),\n  optionalObjectOf: PropTypes.objectOf(PropTypes.number),\n  optionalObjectWithShape: PropTypes.shape({\n    optionalProperty: PropTypes.string,\n    requiredProperty: PropTypes.number.isRequired\n  }).isRequired,\n  // A required object with an exact set of properties and types\n  // This will warn if extra properties are supplied, unlike .shape\n  strictObject: PropTypes.exact({\n    a: PropTypes.number,\n    b: PropTypes.string.isRequired\n  })\n};\n\n// Example usage (in a React application)\n// function App() {\n//   return (\n//     <MyComponent\n//       optionalString=\"hello\"\n//       optionalNumber={123}\n//       optionalEnum=\"News\"\n//       optionalMessage={new MyMessage('Hello from PropType!')}\n//       optionalObjectWithShape={{ requiredProperty: 42 }}\n//       strictObject={{ a: 1, b: 'two' }}\n//     />\n//   );\n// }\n// export default App;\n\n// To prevent 'React' is defined but never used, mock a render if not in a React app context\nif (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\n  console.log('PropTypes example component defined. Run in a React app for full effect.');\n}\n","lang":"javascript","description":"This quickstart defines a React component `MyComponent` and illustrates the declaration of various prop types using `prop-types`, including primitive types, `instanceOf`, `oneOf`, `oneOfType`, `arrayOf`, `objectOf`, `shape`, and `exact` validators. It also shows chaining `isRequired`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}