react-strict-prop-types

0.8.0 • Public • Published

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>
    }
}

Package Sidebar

Install

npm i react-strict-prop-types

Weekly Downloads

1,527

Version

0.8.0

License

BSD-3-Clause

Last publish

Collaborators

  • gajus