What is prop-types-exact?
The prop-types-exact npm package is used to enforce that no additional (undeclared) props are passed to a React component than the ones specified in the propTypes object. This is useful for catching typos or unwanted extra props that might be passed to a component due to refactoring or changes in the codebase.
What are prop-types-exact's main functionalities?
Enforcing exact prop types
This code sample demonstrates how to use prop-types-exact to ensure that the MyComponent only receives the props 'name' and 'age', and no additional props. If any extra props are passed, a warning will be shown in the console during development.
{"MyComponent.propTypes = PropTypesExact({ name: PropTypes.string, age: PropTypes.number }); MyComponent.defaultProps = { name: 'John Doe', age: 30 };"}
Other packages similar to prop-types-exact
airbnb-prop-types
The airbnb-prop-types package provides a collection of PropTypes for React, similar to prop-types-exact, but with additional custom validators. It does not focus solely on exact prop validation but offers more general-purpose validators.
react-immutable-proptypes
This package offers PropTypes validators that are compatible with Immutable.js. While it does not provide the exact prop validation feature of prop-types-exact, it is useful for projects using Immutable.js data structures.
prop-types-exact
For use with React PropTypes. Will error on any prop not explicitly specified.
Usage
import PropTypes from 'prop-types';
import exact from 'prop-types-exact';
function Foo({ foo, bar }) {
return <div>{foo}{bar}</div>
}
Foo.propTypes = exact({
foo: PropTypes.string,
bar: PropTypes.number,
});
<Foo foo="hi" bar={3} />
<Foo foo="hi" bar={3} baz="extra" />
Tests
Simply clone the repo, npm install
, and run npm test