Skip to content
A higher order component that raises an error if component is used with an unknown property.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.gitignore
.npmignore
.travis.yml
README.md
package.json

README.md

react-strict-prop-types

Travis build status NPM version

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

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>
    }
}
You can’t perform that action at this time.