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
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 * @property */
You can decorate your component using react-strict-prop-types
as a function, e.g.
;; Component { return <div />; } /** * @param * @param * @return */Test;
You can decorate your component using the ES7 decorators syntax, e.g.
;; /** * @param * @return */@Component { 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; { if processenvNODE_ENV === 'production' return args0; return ;}
Options
Options are supplied as the second parameter to the StrictPropTypes
function.
;
or as a first parameter to the decorator:
@;
allowHTMLProps
Default: false
.
Allows all HTML properties (including data-*
and aria-*
).
allowSVGProps
Default: false
.
Allows all SVG properties.
prop-types
Rule
ESLint 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.
;; Component static propTypes = testPropTypes; { return <div>thispropsname</div> }