react-strict-prop-types

react-strict-prop-types

A higher order component that raises an error if a component is used with an unknown property. A property is considered unknown when it is not defined in the component propTypes declaration.

For an alternative that runs at the compilation time, read about the ESLint prop-types rule.

• Error
• Usage
• Production Mode
• Options
  • allowHTMLProps
  • allowSVGProps
• ESLint prop-types Rule

Error

The equivalent of the following console.warn message is produced when a component is used with an unknown property.

Using undefined property "foo". Define the missing property in "Test" component propTypes declaration.

Usage

/**
 * @typedef StrictPropTypes~Options
 * @see {@link https://github.com/gajus/react-strict-prop-types#options}
 * @property {Boolean} allowHTMLProps
 */

You can decorate your component using react-strict-prop-types as a function, e.g.

import React from 'react';
import StrictPropTypes from 'react-strict-prop-types';

class Test extends React.Component {
    render () {
        return <div />;
    }
}

/**
 * @param {Function} Component
 * @param {StrictPropTypes~Options} options
 * @return {Function}
 */
export default StrictPropTypes(Test);

You can decorate your component using the ES7 decorators syntax, e.g.

import React from 'react';
import StrictPropTypes from 'react-strict-prop-types';

/**
 * @param {StrictPropTypes~Options} options
 * @return {Function}
 */
@StrictPropTypes()
export default class extends React.Component {
    render () {
        return <div />;
    }
}

Production Mode

react-strict-prop-types should not be used in production. One option to disable react-strict-prop-types in production is to use a custom wrapper, e.g.

// my-strict-prop-types.js
import StrictPropTypes from 'react-strict-prop-types';

export default (...args) => {
    if (process.env.NODE_ENV === 'production') {
        return args[0];
    }
    return StrictPropTypes(...args);
}

Options

Options are supplied as the second parameter to the StrictPropTypes function.

StrictPropTypes(Component, options);

or as a first parameter to the decorator:

@StrictPropTypes(options);

allowHTMLProps

Default: false.

Allows all HTML properties (including data-* and aria-*).

allowSVGProps

Default: false.

Allows all SVG properties.

ESLint prop-types Rule

eslint-plugin-react prop-types rule is an alternative to react-strict-prop-types. The difference is:

prop-types	react-strict-prop-types
Runs during the compilation step.	Runs during the runtime.
Checks for references to undocumented properties inside of the component.	Checks for undocumented properties being passed to the component.

eslint-plugin-react prop-types and react-strict-prop-types can be used together.

The biggest disadvantage of ESLint rule is that it will not produce a warning when propTypes is assigned an external object, e.g.

import React from 'react';
import testPropTypes from './testPropTypes';

class Test extends React.Component {
    static propTypes = testPropTypes;

    render () {
        return <div>{this.props.name}</div>
    }
}