prop-types

library15.8.1jsnpmunverified

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.

testing serialization

npm install prop-types

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PROP-TYPES

prop-types

testingjavascriptv15.8.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

PropTypes

✓ import PropTypes from 'prop-types';

✗ import { PropTypes } from 'prop-types';

PropTypes is the default export of the module for ES Modules.

PropTypes (CommonJS)

✓ const PropTypes = require('prop-types');

✗ import PropTypes from 'prop-types';

Use this CommonJS syntax in older Node.js environments or bundled applications that do not support ES Modules.

Specific validators

✓ MyComponent.propTypes = { optionalString: PropTypes.string };

Individual validators like `string`, `number`, `array`, etc., are properties of the `PropTypes` object and are not imported directly.

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`.

import React from 'react'; import PropTypes from 'prop-types'; class MyMessage { constructor(text) { this.text = text; } } class MyComponent extends React.Component { render() { // Example of using props inside render return ( <div> String: {this.props.optionalString} Number: {this.props.optionalNumber} Enum: {this.props.optionalEnum} Message Text: {this.props.optionalMessage ? this.props.optionalMessage.text : 'N/A'} Required Property: {this.props.optionalObjectWithShape.requiredProperty} </div> ); } } MyComponent.propTypes = { optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalNode: PropTypes.node, optionalElement: PropTypes.element, optionalElementType: PropTypes.elementType, optionalMessage: PropTypes.instanceOf(MyMessage), optionalEnum: PropTypes.oneOf(['News', 'Photos']).isRequired, optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(MyMessage) ]), optionalArrayOf: PropTypes.arrayOf(PropTypes.number), optionalObjectOf: PropTypes.objectOf(PropTypes.number), optionalObjectWithShape: PropTypes.shape({ optionalProperty: PropTypes.string, requiredProperty: PropTypes.number.isRequired }).isRequired, // A required object with an exact set of properties and types // This will warn if extra properties are supplied, unlike .shape strictObject: PropTypes.exact({ a: PropTypes.number, b: PropTypes.string.isRequired }) }; // Example usage (in a React application) // function App() { // return ( // <MyComponent // optionalString="hello" // optionalNumber={123} // optionalEnum="News" // optionalMessage={new MyMessage('Hello from PropType!')} // optionalObjectWithShape={{ requiredProperty: 42 }} // strictObject={{ a: 1, b: 'two' }} // /> // ); // } // export default App; // To prevent 'React' is defined but never used, mock a render if not in a React app context if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') { console.log('PropTypes example component defined. Run in a React app for full effect.'); }

Debug

Known issues

breakingIn React v15.5, `PropTypes` was extracted from the `React` package into its own `prop-types` library. Direct access via `React.PropTypes` no longer works and will result in a runtime error.

fix

Migrate from `React.PropTypes` to `import PropTypes from 'prop-types';` (or `const PropTypes = require('prop-types');`) and use `PropTypes` directly.

affects: >=15.5.0

gotchaprop-types performs runtime checks and only provides warnings in development mode. It does not enforce types at compile-time and is not suitable for critical production validation or security checks.

fix

For compile-time type checking and stronger guarantees, consider migrating to static type checkers like TypeScript or Flow. Do not rely on prop-types for data validation in production environments.

affects: >=15.0.0

deprecatedWhile still maintained, `prop-types` is considered a legacy solution by the React team, with a strong recommendation for developers to adopt static type checking solutions (like TypeScript or Flow) for new projects and substantial refactors.

fix

For new projects, start with TypeScript or Flow. For existing projects, evaluate the cost-benefit of migrating away from `prop-types`.

affects: >=15.5.0

gotchaThe `.shape()` validator allows additional properties beyond those defined in the shape. If you need to restrict an object to an exact set of properties, use the `.exact()` validator instead.

fix

Replace `PropTypes.shape({...})` with `PropTypes.exact({...})` when you need strict object property enforcement without allowing extras.

affects: >=15.6.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'array')

The `PropTypes` object was not correctly imported or is undefined, leading to attempts to access properties (like `array`) on a non-existent object.

fix

Ensure you have `import PropTypes from 'prop-types';` (ES Modules) or `const PropTypes = require('prop-types');` (CommonJS) at the top of your file.

Warning: Failed prop type: The prop `myProp` is marked as required in `MyComponent`, but its value is `undefined`.

A prop that was declared with `.isRequired` was either not provided to the component or was explicitly passed as `undefined`.

fix

Provide a value for the required prop when using the component, e.g., `<MyComponent myProp={someValue} />`, or ensure it's not `undefined` if optional.

Warning: Failed prop type: Invalid prop `myProp` of type `string` supplied to `MyComponent`, expected `number`.

The actual type of the prop passed to the component does not match the type declared in `MyComponent.propTypes`.

fix

Pass a prop of the correct type, e.g., `<MyComponent myProp={123} />` if `myProp` expects a `number`.

ReferenceError: PropTypes is not defined

The `prop-types` library was not imported or included in the scope where it is being used.

fix

Add the necessary import statement for `PropTypes` at the top of the file: `import PropTypes from 'prop-types';` or `const PropTypes = require('prop-types');`.

Upgrade

Version history

15.8.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/prop-types ↗

packagehttps://www.npmjs.com/package/prop-types ↗

homepagehttps://facebook.github.io/react/ ↗