prop-types-exact

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.

README

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} /> // no warnings

<Foo foo="hi" bar={3} baz="extra" /> // propTypes warning!

Tests

Simply clone the repo, npm install, and run npm test